jquery实现轮播图（利用更改背景图片的方法）

傷城~ 2024-04-18 12:44 45阅读 0赞

自己在写轮播图过程中，花费了一些时间，因为是刚开始接触，所以可能不是特别精简.  但是测试和运行都是没有问题的，自己对这个了解之后，觉得这种方法局限性比较大，在其他的一些div文字块实现自动播放，就不能适用，之后会写出来另一种方法，争取最简洁明了的方法，让大家理解清楚，以下是代码部分大家可以实际操作理解一下，如果有任何问题或者不理解的欢迎询问，大家一起共同进步!

.zong {
                width: 590px;
                height: 470px;
                position: relative;
            }
    
            img {
                width: 590px;
                height: 470px;
                border: 1px solid red;
    
            }
    
            .active {
                background-color: orange;
            }
    
            .dots {
                position: absolute;
                bottom: 0;
                left: 300px;
            }
    
            .dot {
                float: left;
            }
    
            .lunbo {
                width: 590px;
                margin: 0 auto;
            }
    
            .left {
                position: absolute;
                top: 50%;
                left: 0;
    
            }
    
            .right {
                position: absolute;
                top: 50%;
                right: 0;
            }
        </style>
        
        html部分
        <div class="zong">
            <div class="lunbo">
                <img src="../201909/20190903/picture/3.jpg" alt="">
            </div>
            <div class="dots">
                <div index=0 class="dot active">1</div>
                <div index=1 class="dot">2</div>
                <div index=2 class="dot">3</div>
                <div index=3 class="dot">4</div>
                <div index=4 class="dot">5</div>
            </div>
            <div class="btn">
                        <button class="left"><</button>
                        <button class="right">></button>
                    </div>
        </div>

jq代码

<script>
           var attrimg = ['../201909/20190903/picture/3.jpg',
               '../201909/20190903/picture/4.jpg',
               '../201909/20190903/picture/bing09.jpg',
               '../201909/20190903/picture/bing14.jpg',
               '../201909/20190903/picture/zhaohanyingzi19.jpg'];
           //图片的索引
           var next = 0;
           var current = 0;
           var tb;
           //默认让第一个点刚开始显示高亮的样式
           $('.dot').eq(0).addClass('active');   
           //自动播放     
           LBS();
           function LBS() {
               tb = setInterval(function () {
                   next = current + 1;
                   if (next >= attrimg.length) {
                       next = 0;
                   }
                   play();
               }, 3000);
           }
           //当鼠标移入小圆点的时候，先让所有的小圆点清除样式，
           //给当前的小圆点加上样式，获取当前小圆点的下标
           //curent的值作为图片的下标
           $('.dot').mouseover(function () {
               // console.log("next" + next);
               //小圆点
               $('.dot').each(function () {
                   $(this).removeClass('active');
               });
               $(this).addClass('active');
               //获取小圆点index
               current = parseInt($(this).attr('index'));
               console.log(typeof current);
               $('.lunbo img').attr('src', attrimg[current]);
               next = current + 1;
           });
    
           //因为多次需要用到下边的内容，所以将其写成一个函数，进行调用比较方便
           //函数内容：
                   // 更改图片的内容，遍历小圆点设置其样式，将下一个值赋值给current；
           function play() {
               $('.lunbo img').attr('src', attrimg[next]);
               $('.dot').each(function () {
                   $(this).removeClass('active');
               });
               $('.dot').eq(next).addClass('active');
               current = next;//更新当前图片索引
           }
           //鼠标移入的时候，清除定时器，暂停自动播放，移出则恢复
           $('.lunbo').mouseout(function() {
               LBS();
           });
           $('.lunbo').mouseover(function() {
               clearInterval(tb);
           });
           //左边点击和右边点击实现播放
           $('.left').click(function () {
               next = current - 1;
               if(next < 0) {
                   next = attrimg.length - 1;
               }
             play();
               
           });
    
           $('.right').click(function () {
               next = current + 1;
               if(next == attrimg.length) {
                   next = 0;
               }
              play();
           });
       </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 jquery实现轮播图（利用更改背景图片的方法）

自己在写轮播图过程中，花费了一些时间，因为是刚开始接触，所以可能不是特别精简. 但是测试和运行都是没有问题的，自己对这个了解之后，觉得这种方法局限性比较大，在其他...

傷城~/ 2024年04月18日 12:44/ 0 赞/ 46 阅读

相关 jQuery实现轮播图

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

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

相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果

开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。 ps：功能比较简单，整个框并不能根据图片的大小自动调节，

客官°小女子只卖身不卖艺/ 2022年10月10日 11:21/ 0 赞/ 251 阅读

相关 jQuery 实现图片轮播

自从学习jQuery之后，简直怀疑人生了。因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞

忘是亡心i/ 2022年07月13日 11:07/ 0 赞/ 374 阅读

相关利用JQuery实现轮播图

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

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

相关利用jquery实现轮播图（适合新手）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

心已赠人/ 2022年05月23日 02:54/ 0 赞/ 178 阅读

相关 jquery 实现轮播图

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

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

相关 jQuery实现轮播图

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

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

相关 jquery 实现图片轮播

html源码： <div class="middle_right"> <div id="lunbobox"> <div id=

水深无声/ 2021年11月23日 11:26/ 0 赞/ 453 阅读

相关 jQuery实现轮播图

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

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