JQuery实现轮播图源码

太过爱你忘了你带给我的痛 2022-05-12 02:24 248阅读 0赞

**设计：**

![70][]

根据上图可以看出，轮播图需要以下元素：外面的盒子div、放置图片集合的盒子ul、放置两侧按钮的盒子div、下侧顺序按钮div

源代码如下：

**一、html源码如下：**

<div class="outer">
    
        <ul class="img">
            <li><a><img src="../static/img/1.jpg"></a></li>
            <li><a><img src="../static/img/2.jpg"></a></li>
            <li><a><img src="../static/img/3.jpg"></a></li>
            <li><a><img src="../static/img/4.jpg"></a></li>
        </ul>
    
    
        <ul class="num">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    
        <div class="left_btn btn"><</div>
        <div class="right_btn btn">></div>
    </div>

**二、css样式实现：**

<style>
        /*去掉默认浏览器样式*/
        *{
            margin: 0;
            padding: 0;
        }
          /*去掉li标签默认样式*/
       li{
           list-style: none;
       }
         /*最外层盒子样式处理：
         1.设置与轮播图高宽一致
         2.设置纵向距顶部50px，水平居中
         3.设置自己为固定位置
         */
        .outer{
            height: 470px;
            width: 590px;
            margin: 50px auto;
            position:relative;
        }
          /*轮播图片集合处理:
          1.将其设置为脱离文档流
          2.设置距顶部和左侧都为0
          */
        .img li{
            position: absolute;
            top: 0;
            left: 0;
        }
          /*顺序按钮区域处理：
          1.设置脱离文档流
          2.通过设置text-align、width使其整体水平居中
          3.设置距离底部20px
          */
        .num{
            position: absolute;
            text-align: center;
            width: 100%;
            bottom: 20px;
        }
       /*顺序按钮处理:
          1.将其设置为行级及块级兼容显示
          2.设置其宽高
          3.设置背景色及字体颜色
          4.设置字体水平居中
          5.通过设置line-height与height一致，使其字体纵向居中
          6.设置其样式为圆形
          7.增加按钮左右间距
          */
        .num li{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            margin: 0 20px;
        }
         /*左、右按钮相同部分处理:
          1.设置其脱离文档流
          2.设置其宽高
          3.设置背景色及字体颜色
          4.设置字体水平居中
          5.通过设置line-height与height一致，使其字体纵向居中
          6.通过设置top、margin-top使其整体纵向居中
          7.默认不显示
          */
        .btn{
            position: absolute;
            width: 20px;
            height: 50px;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 50px;
            top: 50%;
            margin-top: -25px;
            display: none;
        }
          /*左侧按钮处理:
          设置左侧为0
          */
        .left_btn{
            left: 0;
        }
         /*右侧按钮处理:
          设置右侧为0
          */
        .right_btn{
            right: 0;
        }
         /*鼠标悬浮至轮播图区域时左、右按钮处理:
          1.设置左右按钮显示样式为行级块级兼容
          2.设置鼠标放置在左右按钮时样式为小手
          */
        .outer:hover .btn{
            display: inline-block;
            cursor: pointer;
        }
         /*设置顺序按钮初始按钮样式:
          设置为红色（由于样式级别问题会导致设置无效，可通过两种方式解决：
          1.后面加上!important
          2.将css定位写详细，比如：.outer .num .current{……
          ）
          */
        .current{
            background-color: red!important;
        }
    
    </style>

**三、JQuery实现：**

<script src="../static/jquery-3.3.1.min.js"></script>
    <script>
         /*定义位置：由于图片个数与下侧顺序按钮数量一致，可通过位置进行关联*/
        var index=0;
         /*当鼠标放到顺序按钮上时：
         1.将当前这个顺序按钮增加样式为红色背景
         2.移除周围其他同级元素红色背景样式
         3.获取当前顺序按钮的index
         4.通过index获取该位置图片
         5.一秒钟渐入该图片
         6.一秒钟渐出其他相邻图片
         7.防止移动过快导致的效果闪现，使用stop方法
         */
        $(".num li").mousemove(function () {
                $(this).addClass("current").siblings().removeClass("current");
                index=$(this).index();
                $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        });
         /*设置每一秒钟自动轮播：
         1.获取当前位置序号：自加操作；当超过图片最大序号时序号设置为0
         2.设置下侧顺序按钮及轮播图显示
         */
        var time=setInterval(move,1000);
        function move() {
            index++;
            if (index==4){
                index=0
            }
            $(".num li").eq(index).addClass("current").siblings().removeClass("current");
            $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        };
        /*当鼠标划入、划出轮播图区域时：
        1.划入时停止自动轮播
        2.划出时继续自动轮播
        */
        $(".outer").hover(function () {
            clearInterval(time);
        },
        function () {
            time=setInterval(move,1000);
        });
         /*点击右侧按钮时执行*/
        $(".right_btn").click(function () {
           move();
        });
         /*点击左侧按钮时执行*/
        function moveL() {
             index--;
            if (index==-1){
                index=3
            }
            $(".num li").eq(index).addClass("current").siblings().removeClass("current");
            $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        }
        $(".left_btn").click(function () {
            moveL();
        });
    </script>

完整源码下载：

[https://download.csdn.net/download/baobao267/10665038][https_download.csdn.net_download_baobao267_10665038]

[70]: /images/20220512/ef0a29d52b5945cfaa32c706cbe6ed40.png
[https_download.csdn.net_download_baobao267_10665038]: https://download.csdn.net/download/baobao267/10665038

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现轮播图

我之前用css3实现轮播图过，不过那是一个简单的轮播图，只能来回切换图片。因为那时候我还没有学过javascript，没学过javascript的同学也可以去我主页看看。当然，

梦里梦外;/ 2022年11月15日 03:46/ 0 赞/ 268 阅读

相关简单php轮播源码,jQuery实现轮播图源码

本文实例为大家分享了jQuery实现轮播图展示的具体代码，供大家参考，具体内容如下设计： ![d29eb70098326b77d4a114d381e98abd.png][

朱雀/ 2022年10月21日 03:59/ 0 赞/ 140 阅读

相关使用jQuery实现轮播图

大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小为3

忘是亡心i/ 2022年09月07日 05:57/ 0 赞/ 283 阅读

相关 jQuery实现轮播图（二）

这里的轮播为轮播增添了一个效果，前一张图片整体碎成小块块然后上移消失，而下一张图片显示出 ![这里写图片描述][SouthEast] 原理为：事先创建一堆浮动的div（宽

r囧r小猫/ 2022年06月11日 00:09/ 0 赞/ 286 阅读

相关 jquery简单轮播图实现

其实轮播的代码很简单只需要20多行jq代码就可以实现了以下便是简单轮播的代码： <!DOCTYPE html> <html> <head

怼烎@/ 2022年06月10日 12:56/ 0 赞/ 275 阅读

相关利用JQuery实现轮播图

上一篇文章写了利用初级JS实现无缝轮播图，但是实际写起来有点费劲，量有些大，如果改用jQuery写无缝轮播图的话，写起来比较便捷，而已逻辑比较清晰，简单，实现起来比较快捷，性能

待我称王封你为后i/ 2022年05月29日 11:35/ 0 赞/ 312 阅读

相关 JQuery实现轮播图源码

设计： ![70][] 根据上图可以看出，轮播图需要以下元素：外面的盒子div、放置图片集合的盒子ul、放置两侧按钮的盒子div、下侧顺序按钮div 源代码如下：一、

太过爱你忘了你带给我的痛/ 2022年05月12日 02:24/ 0 赞/ 249 阅读

相关 jquery 实现轮播图

<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播图

ゝ一世哀愁。/ 2022年05月11日 12:52/ 0 赞/ 421 阅读

相关 jQuery实现轮播图

先展示一下轮播图的终结版截图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

淩亂°似流年/ 2021年12月14日 09:45/ 0 赞/ 481 阅读

相关 jQuery实现轮播图

最简单的方式实现轮播图话不多说,直接粘代码 HTML片段 <!DOCTYPE html> <html lang="en"> <head>

港控/mmm°/ 2021年11月17日 08:20/ 0 赞/ 539 阅读