jQuery实现幻灯片播放效果

最新推荐文章于 2021-11-02 21:07:05 发布
最新推荐文章于 2021-11-02 21:07:05 发布
阅读量653 收藏 6
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43895356/article/details/109350561
版权

jQuery实现一个类似幻灯片播放的效果
主要功能：

  1. 幻灯片播放与暂停
  2. 点击前后按钮切换图片
  3. 点击按钮查看图片缩略图
  4. 点击对应的缩略图可以切换当前图片
  5. 缩略图可以进行翻页

效果：在这里插入图片描述
在这里插入图片描述
具体实现代码中已经详细解释

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #main_window {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 10px;
            border-radius: 10px 10px 10px 10px;
            background: rgb(16, 16, 16);
            overflow: hidden;
        }
        
        #show_window {
            position: relative;
            top: 75px;
            left: 75px;
            width: 450px;
            height: 450px;
        }
        
        #show_image {
            width: 450px;
            height: 450px;
            box-shadow: 1px 5px 5px #000;
        }
        
        #ctrl_window {
            position: absolute;
            top: 545px;
            left: 620px;
            width: 170px;
            height: 25px;
            padding: 5px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #000;
            border-radius: 5px 5px 5px 5px;
        }
        
        #ctrl_window .ctrl_btn {
            width: 25px;
            height: 25px;
            opacity: 0.5;
            transition: all 500ms ease;
        }
        
        #ctrl_window .ctrl_btn:hover {
            opacity: 1.0;
        }
        
        #more_btn {
            background-size: cover;
            background-image: url(https://img.php.cn/upload/course/000/000/006/58217dd1e1d07217.png);
        }
        
        #left_btn {
            background-size: cover;
            background-image: url(https://img.php.cn/upload/course/000/000/006/58217e1322f73540.png);
        }
        
        #ctrl_window .pause {
            background-size: cover;
            background-image: url(https://img.php.cn/upload/course/000/000/006/58217e6fceab9946.png);
        }
        
        #ctrl_window .play {
            background-size: cover;
            background-image: url(https://img.php.cn/upload/course/000/000/006/58217e8f030de682.png);
        }
        
        #right_btn {
            background-size: cover;
            background-image: url(https://img.php.cn/upload/course/000/000/006/58217e4c9f3df621.png);
        }
        
        #preview_images_window {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: -250px;
            left: 125px;
            width: 350px;
            height: 250px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.8);
        }
        
        .image_group {
            position: absolute;
            width: 285px;
            height: 188px;
            opacity: 1;
            /* transition: all 300ms ease; */
        }
        
        #preview_images_window .small_image {
            width: 85px;
            height: 85px;
            margin: 5px;
            opacity: 0.5;
            float: left;
            transition: all 300ms ease;
        }
        
        #preview_images_window .small_image:hover {
            opacity: 1.0;
        }
        
        .preview_ctrl_btn {
            position: absolute;
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: center;
            opacity: 0.5;
            transition: all 300ms ease;
        }
        
        .preview_ctrl_btn:hover {
            opacity: 1.0;
        }
        
        #previous_btn {
            left: 10px;
            background-image: url(https://img.php.cn/upload/course/000/000/006/58217ef19a95e568.png);
        }
        
        #next_btn {
            right: 10px;
            background-image: url(https://img.php.cn/upload/course/000/000/006/58217ecb6c91f719.png);
        }
        
        #close_btn {
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
            width: 50px;
            height: 20px;
            bottom: 0px;
            background-color: #202020;
            background-image: url(https://img.php.cn/upload/course/000/000/006/58217f13d5601331.png);
        }
    </style>
</head>

<body>
    <div id="main_window">
        <div id="show_window">
            <img src="images/img1.jpg" id="show_image">
        </div>
        <div id="ctrl_window">
            <a id="more_btn" class="ctrl_btn"></a>
            <a id="left_btn" class="ctrl_btn"></a>
            <a id="switch_btn" class="ctrl_btn pause"></a>
            <a id="right_btn" class="ctrl_btn"></a>
        </div>
        <div id="preview_images_window">
            <div class="image_group">
                <img src="images/img1.jpg" class="small_image">
                <img src="images/img2.jpg" class="small_image">
                <img src="images/img3.jpg" class="small_image">
                <img src="images/img4.jpg" class="small_image">
                <img src="images/img5.jpg" class="small_image">
                <img src="images/img6.jpg" class="small_image">
            </div>
            <div class="image_group">
                <img src="images/img7.jpg" class="small_image">
                <img src="images/img8.jpg" class="small_image">
                <img src="images/img9.jpg" class="small_image">
                <img src="images/img10.jpg" class="small_image">
                <img src="images/img11.jpg" class="small_image">
                <img src="images/img12.jpg" class="small_image">
            </div>
            <div class="image_group">
                <img src="images/img13.jpg" class="small_image">
                <img src="images/img14.jpg" class="small_image">
                <img src="images/img15.jpg" class="small_image">
                <img src="images/img16.jpg" class="small_image">
                <img src="images/img17.jpg" class="small_image">
                <img src="images/img18.jpg" class="small_image">
            </div>
            <a id="previous_btn" class="preview_ctrl_btn"></a>
            <a id="next_btn" class="preview_ctrl_btn"></a>
            <a id="close_btn" class="preview_ctrl_btn"></a>
        </div>
    </div>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            //获取组件：主窗口
            var $main_window = $("#main_window");
            //获取组件：控制按钮窗口
            var $ctrl_window = $("#ctrl_window");
            //获取组件：主窗口显示图片
            var $show_image = $("#show_image");
            //获取组件：预览窗口
            var $preview_window = $("#preview_images_window");
            //获取组件：预览图片组
            var $image_groups = $(".image_group");
            //获取组件：主窗口控制按钮
            var $more_btn = $("#more_btn");
            var $left_btn = $("#left_btn");
            var $right_btn = $("#right_btn");
            var $switch_btn = $("#switch_btn");
            //获取组件：预览窗控制按钮
            var $previous_btn = $("#previous_btn");
            var $next_btn = $("#next_btn");
            var $close_btn = $("#close_btn");

            //设置变量：图片组的数量
            var groups_size = $image_groups.length;
            //设置变量：当前图片组索引
            var current_group_index = 0;
            //设置变量：图片组中的图片数量
            var images_size = $image_groups.first().children().length;
            //设置变量：当前图片组的图片索引
            var current_image_index = 0;
            //设置变量：当前播放状态：true播放，false暂停
            var current_play_status = true;
            //设置变量：定时器
            var timeout = setInterval(showNextImage, 5000);

            //初始化图片组隐藏和显示第一组
            $image_groups.hide();
            $image_groups.first().show();

            //绑定事件：主窗口控制台区域的弹出
            mainWindowMouseenter();
            //绑定事件：主窗口控制台区域的收起
            mainWindowMouseleave();
            //绑定事件：预览窗口开启按钮，停止轮播，同时主窗口控制台收起，并取消其的弹出事件
            $more_btn.bind("click", function() {
                current_play_status = false;
                $switch_btn.removeClass("pause");
                $switch_btn.addClass("play");
                clearInterval(timeout);
                previewWindowOpen();
                ctrlWindowDisappear();
                $main_window.unbind("mouseenter");
            });
            //绑定事件：预览窗口关闭按钮，同时主窗口控制台弹出，并再次绑定其的弹出事件
            $close_btn.bind("click", function() {
                previewWindowClose();
                ctrlWindowAppear();
                mainWindowMouseenter();
            });
            //绑定事件：展示上一组预览图
            $previous_btn.bind("click", function() {
                if (!($image_groups.is(":animated"))) {
                    showPreviewImageGroup();
                };
            });
            //绑定事件：展示下一组预览图
            $next_btn.bind("click", function() {
                if (!($image_groups.is(":animated"))) {
                    showNextImageGroup();
                }
            });
            //绑定事件：展示上一张图片
            $left_btn.bind("click", function() {
                if (!($show_image.is(":animated"))) {
                    showPreviewImage();
                }
            });
            //绑定事件：展示下一张图片
            $right_btn.bind("click", function() {
                if (!($show_image.is(":animated"))) {
                    showNextImage();
                }
            });
            //绑定事件：预览图点击显示图片
            $image_groups.each(function() {
                var $this = $(this);
                $this.children().each(function(i) {
                    $(this).bind("click", function() {
                        showImageByIndex(i);
                        $close_btn.trigger("click");
                    });
                });
            });
            //绑定事件：播放与暂停图片的切换
            $switch_btn.bind("click", function() {
                var $this = $(this);
                $this.toggleClass("play");
                $this.toggleClass("pause");
                if (current_play_status) {
                    current_play_status = false;
                    clearInterval(timeout)
                } else {
                    current_play_status = true;
                    timeout = setInterval(showNextImage, 5000);
                }
            });
            //主窗口mouseenter绑定事件：控制台的弹出
            function mainWindowMouseenter() {
                $main_window.bind("mouseenter", function() {
                    ctrlWindowAppear();
                });
            }
            //主窗口mouseleave绑定事件：控制台的收起
            function mainWindowMouseleave() {
                $main_window.bind("mouseleave", function() {
                    ctrlWindowDisappear();
                });
            }

            //控制按钮窗口出现
            function ctrlWindowAppear() {
                $ctrl_window.stop().animate({
                    left: ($main_window.width() - $ctrl_window.width() - 20) + "px"
                }, 500, "swing")
            }
            //控制按钮窗口关闭
            function ctrlWindowDisappear() {
                $ctrl_window.stop().animate({
                    left: ($main_window.width() + 20) + "px"
                }, 500, "swing");
            }
            //收起预览窗口
            function previewWindowClose() {
                $preview_window.animate({
                    top: (-$preview_window.height()) + "px"
                }, 500, "swing");
            }
            //弹出预览窗口
            function previewWindowOpen() {
                $preview_window.animate({
                    top: "0px"
                }, 500, "swing");
            }
            //淡入淡出展示上一组预览图片
            function showPreviewImageGroup() {
                if (current_group_index != 0) {
                    var now = current_group_index;
                    current_group_index--;
                    var preview = current_group_index;
                    $image_groups.eq(now).fadeOut(function() {
                        $image_groups.eq(preview).fadeIn();
                    });
                }
            }
            //淡入淡出展示下一组预览图片
            function showNextImageGroup() {
                if (current_group_index != groups_size - 1) {
                    var now = current_group_index;
                    current_group_index++;
                    var next = current_group_index;
                    $image_groups.eq(now).fadeOut(function() {
                        $image_groups.eq(next).fadeIn();
                    });
                }
            }
            //设置展示index组预览图片
            function showImageGroupByIndex(index) {
                $image_groups.eq(current_group_index).hide();
                $image_groups.eq(index).show();
                current_group_index = index;
            }
            //通过index设置图片
            function showImageByIndex(index) {
                var $small_image = $image_groups.eq(current_group_index).find(".small_image").eq(index);
                var source = $small_image.attr("src");
                $show_image.fadeOut(function() {
                    $show_image.attr("src", source);
                    $show_image.fadeIn();
                    current_image_index = index;
                });
            }
            //主窗口淡入淡出展示上一个图片
            function showPreviewImage() {
                if (current_image_index == 0) {
                    showImageGroupByIndex(current_group_index == 0 ? groups_size - 1 : current_group_index - 1);
                    showImageByIndex(images_size - 1);
                } else {
                    showImageByIndex(current_image_index - 1);
                }
            }
            //主窗口淡入淡出展示下一个图片
            function showNextImage() {
                if (current_image_index == images_size - 1) {
                    showImageGroupByIndex(current_group_index == groups_size - 1 ? 0 : current_group_index + 1);
                    showImageByIndex(0);
                } else {
                    showImageByIndex(current_image_index + 1);
                }
            }
        });
    </script>
</body>

</html>
arc3102
关注
使用jQuery实现简单的幻灯片效果
CyberOI的博客
09-28 327
在本文中，我们介绍了如何使用jQuery来实现一个简单的幻灯片效果。我们通过HTML和CSS创建了幻灯片的基本结构和样式，并使用jQuery库来实现幻灯片的切换逻辑。通过这个例子，您可以了解到如何使用jQuery库来简化JavaScript代码的编写，以及如何通过设置定时器和使用动画效果来实现幻灯片的切换。在这篇文章中，我们将介绍如何使用jQuery来实现一个简单的幻灯片效果。这里我们为幻灯片容器添加一些基本的样式，并隐藏所有的图片，只显示第一张图片。在每次切换中，我们首先获取当前显示的图片和下一张图片。
jquery实现幻灯片效果
04-16
jquery实现带缩略图的幻灯片效果，非常好实用，改改就能使用。。
jQuery jQuery幻灯片效果
guoqingru0311的博客
09-09 347
jQuery jQuery幻灯片效果1、html代码1、index.html文件2、js代码部分1、slide2.js文件3、css代码1、reset.css2、main.css 1、html代码 1、index.html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
Jquery图片自动幻灯片效果
GQ_cyan的博客
03-20 1174
效果如图： 首先Html文件： 1 2 3 4 5 其次css文件： body,div,ul,li{margin:0;padding:0;} ul{list-s
Jquery中幻灯片效果的简单实现
qiaojianwei2006的专栏
09-27 3455
在用Jquery写一个幻灯片效果的时候参考了网上上一些实例，写了我的一个简单实现。首先要写一个CSS的结构，这样在JSP页面中可以方面循环生成图片，避免固定图片。 #outer{position:relative;width:500px;overflow:hidden;}//一定要是position为relative，宽度要设置，不然无法起
使用jquery mobile做幻灯播放效果实现步骤
10-27
从给定文件中，我们可以提取以下知识点来阐述如何使用jQuery Mobile实现幻灯播放效果。 首先，我们需要了解什么是jQuery Mobile。jQuery Mobile是jQuery的一个移动应用框架，它用于开发响应式跨平台移动应用。它的...
jquery实现简单的自动播放幻灯片效果
10-24
在这篇文章的第三部分，作者展示了如何利用jQuery来实现幻灯片的自动播放效果。他首先使用了jQuery的ready函数确保在DOM加载完毕后执行代码。然后，通过选择器选中了除第一个之外的所有div元素并将其隐藏。使用...
jQuery途牛首页定时幻灯片轮播效果
11-12
在实现幻灯片轮播时，jQuery的优势在于其丰富的API和简洁的语法，能够快速实现复杂的交互效果。 幻灯片轮播的实现通常包括以下几个关键部分： 1. **HTML结构**：首先，我们需要在HTML中创建一个容器，包含所有幻灯...
jquery实现png透明幻灯片效果.rar
07-05
在实现幻灯片效果时，jQuery提供了一系列方便的函数，如`.fadeIn()`、`.fadeOut()`、`.slideToggle()`等，这些都可以用来实现图片的渐显渐隐或者滑动切换效果。 PNG是一种支持透明度的图像格式，可以创建具有半透明...
jquery简单实现幻灯片的方法
10-23
通过上述知识点，我们可以了解到使用jQuery实现幻灯片所需掌握的核心概念，以及如何通过简单的代码来实现一个基本的自动播放幻灯片效果。此外，从示例代码中我们也可以看到，通过合理地组织HTML结构、CSS样式和...
js图片幻灯片 jquery幻灯片图片 html幻灯片案例
11-15
js图片幻灯片 jquery幻灯片图片 html幻灯片案例，官方以及本人的案例各有一个
Jquery 幻灯片
09-26
jquery 幻灯片插件，可用于广告、图片新闻等模块，默认配置就很好，带左右箭头、圆点导航和自动播放，可满足大多数要求。
一个漂亮的js幻灯片效果 jquery 幻灯片
01-10
漂亮的jquery 幻灯片切换效果！
jquery-幻灯片效果-编辑中
pyhui的技术博客
06-27 482
幻灯片的效果 原理介绍 幻灯片 有多张图片 结构 样式 JQ代码 获取li标签 让第一张保留在原位。其它几张都移到右边去 每一张幻灯图片的宽度是760象素 让除了第一个的其它成员，移动到右边 关于幻灯片上的点点 是动态创建上去的 后面如果有几个幻灯片，就做几个点点上去 获取幻灯片个数 获取点点的容器 创建点点，根据幻灯片的长度 并且给第一个点点添加一个样式 目标： 先做...
jQuery幻灯片
weixin_52421124的博客
11-02 332
幻灯片（非3D模式） <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script language="javascript" src="jquery.js"></script> <body> <div style=" width:800px; height:30
Jquery简单幻灯片
weixin_30600197的博客
12-13 102
看了许多jquery的幻灯片，自己也想学着弄一个，简单是简单了一点。不过研究过，还是比较安慰的啦，以下代码并未在生产环境中使用过，如果您要在生产环境中使用，请慎重 /* slide(FrameId, FrameWidth, FrameHeight, UlId, isshow,Intervaltime) 外层对象ID，外层宽度，外层高度，内层ID，是否显示半透明层，切换时间间隔 */ func...
jquery 幻灯片_有关使用jQuery创建支持滑动的幻灯片的完整教程
cukeoumuqian0413的博客
08-02 382
jquery 幻灯片No matter what’s the basic purpose of your website, if you’ve equipped it with a fully-functional Javascript slideshow, you’ve reduced the gap between your business and the targeted customer...
jQuery实现宽屏幻灯片切换效果教程
- 实现幻灯片效果可以通过多种技术手段，例如纯CSS、JavaScript、jQuery等。 - 使用jQuery实现幻灯片切换，可以通过监听点击事件、鼠标事件或是自动定时器来触发幻灯片之间的切换。 - 在实现过程中，可能涉及到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值