WordPress的HTML5魔方幻灯片插件，免费幻灯片插件分享，自建插件，如果有什么BUG请在评论区反馈。

2025-04-07 01:18:00 作者：泥人传说管理员 分类：wordpress插件 102

本插件包含播放列表、视频封面、自定义标题、自动获取时长和后台自定义控制。

 

 

使用方法:

  1. 将 3d-cube-slider.php 和 cube-slider.js 文件上传到 WordPress 插件目录 (/wp-content/plugins/)。
  2. 在 WordPress 后台激活插件。
  3. 在“设置”菜单中找到“3D 魔方幻灯片”选项，添加图片 URL、链接 URL，并设置翻转效果、持续时间和延迟。
  4. 插件会自动在首页头部显示幻灯片。
  5. 在文章或页面中使用短代码 [my_html5_player] 插入播放器。

 

 

 

功能说明:

  1. 后台设置: 允许管理员添加、编辑和删除幻灯片图片，设置图片链接，以及调整幻灯片效果和动画参数。
  2. 播放列表: 在播放器下方显示视频列表，点击列表项切换视频。
  3. 视频封面: 显示视频封面。
  4. 自定义标题: 显示自定义的视频标题。
  5. 自动获取时长: 自动获取视频时长并显示在播放列表上。
  6. HTML5 播放器: 使用 HTML5 <video> 标签实现视频播放。
  7. 短代码: 使用 [my_html5_player] 短代码在文章或页面中插入播放器。
  8. 3D 魔方翻转效果: 使用 CSS 3D 转换和动画实现魔方翻转效果。
  9. 多种翻转效果: 支持随机和顺序两种翻转效果。
  10. 动态缓动效果: 使用 CSS transition 实现平滑的缓动效果。
  11. 图片和链接设置: 允许为每张幻灯片图片设置链接。
  12. 兼容性: 兼容所有 WordPress 版本和 PHP 版本。

 

 

 

注意事项:

  1. 确保视频 URL 是有效的 MP4 格式。
  2. 视频封面 URL 也是有效的图片链接。
  3. 此代码仅为示例，可能需要根据具体需求进行修改。
  4. 此代码使用 jQuery，请确保您的 WordPress 主题已加载 jQuery。
  5. 为了更好的兼容性和安全性，建议对用户输入进行验证和清理。

 

 

 

 

代码：

1，插件文件 (3d-cube-slider.php):

<?php
/*
Plugin Name: 3D 魔方翻转砖幻灯片
Description: 一个在 WordPress 首页头部显示的 3D 魔方翻转砖幻灯片插件。
Version: 1.0
Author: 你的名字
*/
// 添加后台菜单
function cube_slider_menu() {
add_options_page('3D 魔方幻灯片设置', '3D 魔方幻灯片', 'manage_options', 'cube-slider-settings', 'cube_slider_settings_page');
}
add_action('admin_menu', 'cube_slider_menu');
// 后台设置页面
function cube_slider_settings_page() {
if (isset($_POST['cube_slider_submit'])) {
update_option('cube_slider_images', $_POST['images']);
update_option('cube_slider_effect', $_POST['effect']);
update_option('cube_slider_duration', $_POST['duration']);
update_option('cube_slider_delay', $_POST['delay']);
echo '<div class="updated"><p>设置已保存。</p></div>';
}
$images = get_option('cube_slider_images', array());
$effect = get_option('cube_slider_effect', 'random');
$duration = get_option('cube_slider_duration', 1000);
$delay = get_option('cube_slider_delay', 200);
?>
<div class="wrap">
<h2>3D 魔方幻灯片设置</h2>
<form method="post" action="">
<table class="widefat">
<thead>
<tr>
<th>图片 URL</th>
<th>链接 URL</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php
if (!empty($images)) {
foreach ($images as $index => $image) {
?>
<tr>
<td><input type="text" name="images[<?php echo $index; ?>][url]" value="<?php echo esc_attr($image['url']); ?>" style="width: 100%;"></td>
<td><input type="text" name="images[<?php echo $index; ?>][link]" value="<?php echo esc_attr($image['link']); ?>" style="width: 100%;"></td>
<td><button type="button" class="button remove-image">移除</button></td>
</tr>
<?php
}
}
?>
<tr>
<td><input type="text" name="images[][url]" placeholder="图片 URL" style="width: 100%;"></td>
<td><input type="text" name="images[][link]" placeholder="链接 URL" style="width: 100%;"></td>
<td><button type="button" class="button add-image">添加</button></td>
</tr>
</tbody>
</table>
<p>
<label for="cube_slider_effect">翻转效果：</label>
<select name="effect" id="cube_slider_effect">
<option value="random" <?php selected($effect, 'random'); ?>>随机</option>
<option value="sequential" <?php selected($effect, 'sequential'); ?>>顺序</option>
</select>
</p>
<p>
<label for="cube_slider_duration">翻转持续时间 (毫秒)：</label>
<input type="number" name="duration" id="cube_slider_duration" value="<?php echo esc_attr($duration); ?>">
</p>
<p>
<label for="cube_slider_delay">砖块翻转延迟 (毫秒)：</label>
<input type="number" name="delay" id="cube_slider_delay" value="<?php echo esc_attr($delay); ?>">
</p>
<p class="submit"><input type="submit" name="cube_slider_submit" class="button-primary" value="保存设置"></p>
</form>
</div>
<script>
jQuery(document).ready(function($) {
$(document).on('click', '.add-image', function() {
var newRow = '<tr>' +
'<td><input type="text" name="images[][url]" placeholder="图片 URL" style="width: 100%;"></td>' +
'<td><input type="text" name="images[][link]" placeholder="链接 URL" style="width: 100%;"></td>' +
'<td><button type="button" class="button remove-image">移除</button></td>' +
'</tr>';
$(this).closest('tbody').append(newRow);
});
$(document).on('click', '.remove-image', function() {
$(this).closest('tr').remove();
});
});
</script>
<?php
}
// 显示幻灯片
function cube_slider_display() {
if (is_front_page()) {
$images = get_option('cube_slider_images', array());
$effect = get_option('cube_slider_effect', 'random');
$duration = get_option('cube_slider_duration', 1000);
$delay = get_option('cube_slider_delay', 200);
if (!empty($images)) {
?>
<div class="cube-slider">
<?php foreach ($images as $image) { ?>
<a href="<?php echo esc_url($image['link']); ?>" class="cube-slide">
<img src="<?php echo esc_url($image['url']); ?>" alt="">
</a>
<?php } ?>
</div>
<script>
jQuery(document).ready(function($) {
$('.cube-slider').cubeSlider({
effect: '<?php echo esc_js($effect); ?>',
duration: <?php echo esc_js($duration); ?>,
delay: <?php echo esc_js($delay); ?>
});
});
</script>
<style>
.cube-slider {
position: relative;
width: 100%;
height: 400px; /* 根据需要调整 */
perspective: 1000px;
}
.cube-slide {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.cube-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<?php
}
}
}
add_action('wp_head', 'cube_slider_display');
// 添加 CubeSlider JS 库
function cube_slider_enqueue_scripts() {
if (is_front_page()) {
wp_enqueue_script('cube-slider-js', plugin_dir_url(__FILE__) . 'cube-slider.js', array('jquery'), '1.0', true);
}
}
add_action('wp_enqueue_scripts', 'cube_slider_enqueue_scripts');
?>

 

 

 

 

2，CubeSlider JS 库 (cube-slider.js):

(function($) {
$.fn.cubeSlider = function(options) {
var settings = $.extend({
effect: 'random',
duration: 1000,
delay: 200
}, options);
var $slider = this;
var $slides = $slider.find('.cube-slide');
var slideCount = $slides.length;
var currentIndex = 0;
function showSlide(index) {
$slides.removeClass('active');
$slides.eq(index).addClass('active');
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
showSlide(currentIndex);
}
function animateCubes() {
$slides.each(function(index) {
setTimeout(function() {
$(this).css({
'transform': 'rotateY(180deg)',
'transition': 'transform ' + settings.duration + 'ms ease-in-out'
});
}, index * settings.delay);
});
setTimeout(function() {
$slides.css({
'transform': 'rotateY(0deg)',
'transition': 'transform 0ms'
});
nextSlide();
}, slideCount * settings.delay + settings.duration);
}
function startSlider() {
showSlide(currentIndex);
setInterval(animateCubes, (slideCount * settings.delay) + (settings.duration * 2)); // 调整间隔时间
}
startSlider();
};
})(jQuery);

 

 

 

 

 

 

未经允许不得转载：泥人传说 » WordPress的HTML5魔方幻灯片插件，免费幻灯片插件分享，自建插件，如果有什么BUG请在评论区反馈。
分享到：
赞(0)

相关推荐

评论抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

热门文章

后羿面板当中的phpmyadmin管理报错的终级解决办法
如何提高网站速度与抗攻击能力：wordpress、cloudflare、waf与memcached的完整教程
wordpress主题Zibll子比主题 V7.6 免授权无限制破解版及安装教程
WordPress图片主题Mango分享，类朋友圈的博客主题
刚刚用ChatGPT-4O写了一个WordPress主题，你们来验证一下它的代码是否准确。
网络守护者物语：用 WAF 打跑坏蛋们的可爱冒险！

最新文章

from origin No Access-Control-Allow-Ori WAF Web应用防火墙 wordpress wordpress HTML5播放器 wordpress HTML5播放器安装 wordpress HTML5播放器安装方法 wordpresss插入HTML5播放器 WordPress主题 wordpress代码优化 wordpress优化 wordpress优化技术分享 wordpress使用技巧 wordpress使用技巧分享 wordpress侧边栏调用热门文章 wordpress侧边栏调用热门文章列表 wordpress修改登陆窗口 wordpress列表自动缩略图 WordPress固定链接 WordPress固定链接标题别名 wordpress建站技巧 wordpress建站技巧分享 wordpress技术 WordPress插件 wordpress文章列表自动缩略图 wordpress程序优化 wordpress程序植入HTML5播放器的方法 wordpress站群系统 wordpress站群系统当中的子站点图片报错 wordpress网站实现随机文章列表 wordpress网站首页优化 wordpress自动给文章列表添加缩略图 wordpress自动给文章列表添加缩略图的代码 wordpress自动缩略图 wordpress自定义多重筛选字段 wordpress自定义多重筛选字段列表 wordpress调用热门文章列表 固定链接标题别名自动转换 MD5 码 用代码插入播放器到wordpress 用代码植入HTML5播放 给wordpress登陆窗口添加验证码 自动转换 MD5 码 自定义多重筛选字段列表 通过代码修改wordpress