jq轮播图2

柔情只为你懂 2024-04-18 15:05 55阅读 0赞

今天续着上一期的来给大家讲另外一种方法的轮播图  
  这种方法可以实现无缝轮播，原理就是我们在自己预先想要设置轮播的那一组照片后边，用jq语言在另外加上一组相同的照片，相当于现在的长度就是两组照片的长度，我们将初始的图片索引值就先定在我们复制的第一张图片上，就是复1的位置，当我们一次开始向右边滚动的时候，到第复5的时候，在执行完过渡动画后，将其定位为原5，然后再一次循环，因为复5和原5是一样的通过这样实现了无缝切换滚动。  
 还有一种情况我们要考虑，当我们点击左边按钮的时候，我们要考虑到原1的时候，我们要将其定位为复1，同样的道理都是利用相同的图片原因实现的无缝滚动，接下来给大家直接上代码，一例胜千言

![在这里插入图片描述][20190908162413354.png]  
![在这里插入图片描述][20190908163230379.png]

<style>
            .tu {
                position: relative;
                width: 600px;
                height: 400px;
                overflow: hidden;
                margin: 0 auto;
            }
    
            .pian {
                position: absolute;
                width: 3600px;
                height: 400px;
            }
    
            .pic {
                float: left;
                width: 600px;
                height: 400px;
            }
    
            .dots {
                position: absolute;
                bottom: 0;
                left: 0;
            }
    
            .dot {
                float: left;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 5px;
                background-color: #fff;
            }
    
            .left {
                position: absolute;
                width: 30px;
                height: 30px;
                left: 0;
                top: 50%;
            }
    
            .right {
                position: absolute;
                width: 30px;
                height: 30px;
                right: 0;
                top: 50%;
            }
    
            .active {
                background: red;
            }
        </style>

<div class="zong">
           
           <div class="tu">
               
               <div class="pian">
    
                   <img class="pic" src="../201909/20190903/picture/4.jpg" alt="1">
                   <img class="pic" src="../201909/20190903/picture/bing09.jpg" alt="2">
                   <img class="pic" src="../201909/20190903/picture/bing14.jpg" alt="3">
                   <img class="pic" src="../201909/20190903/picture/zhaohanyingzi19.jpg" alt="4">
                   <img class="pic" src="../201909/20190903/picture/3.jpg" alt="0">
               </div>
               <div class="dots">
                   <div class="dot active"></div>
                   <div class="dot"></div>
                   <div class="dot"></div>
                   <div class="dot"></div>
                   <div class="dot"></div>
               </div>
               <div class="btn">
                   <button class="left"><</button>
                   <button class="right">></button>
               </div>
           </div>
    
       </div>

<script>
           //用find方法获取到咱们咱需要轮播的那组图片
           var neirong = $('.tu').find('.pian');
           var picWidth = $('.tu').width();
           var index = 0;//图片索引
           var tb = 0;//定时器
           var oldlength = $('.tu').find('.pic').length;//图片自身的长度
           var length = oldlength * 2;//复制了一遍图片后的长度
           //默认从复制的第一张图片开始
    
           index = oldlength;
           //复制一遍图片加入到原来图片的后面
           neirong.append(neirong.html()).css({ width: picWidth * length, left: -picWidth * index });
           setTimer();
           var tb;
           function setTimer() {
               tb = setInterval(function () {
                   index++;
                   changeneirong();
                   changedots();
               }, 3000);
           }
    
           $('.left').click(function() {
               //清除定时器
               clearInterval(tb);
               if(!neirong.is(':animated')) {
                   index --;
                   changeneirong();
                   changedots();
               }
           });
           $('.right').click(function() {
               clearInterval(tb);
               //判断这个时候有没有在执行动画
               if(!neirong.is(':animated')) {
                   index ++;
                   changeneirong();
                   changedots();
               }
           });
           // $('.tu').mouseover(function() {
           //     console.log(77);
           //     clearInterval(tb);
           // })
           //点击轮播点的时候，进行相对应的图片的切换
           $('.dot').mouseover(function(event) {
               //鼠标放上去的时候清除定时器
               clearInterval(tb);
               //再次开始定时播放
               setTimer();
               index = $(event.target).index() + oldlength;
               changeneirong();
               changedots();
           });
       
           function changeneirong() {
               neirong.animate({ left: -picWidth * index }, 500,
                   function () {
                       if (index <= 0) {
                           index = oldlength;
                           neirong.css({ left: -picWidth * index });
                       }
                       if (index >= length - 1) {
                           index = oldlength - 1;
                           neirong.css({ left: -picWidth * index });
                       }
                   });
           }
           //轮播点的切换
           function changedots() {
               $('.dot').removeClass('active').eq(index % oldlength).addClass('active');
           }
    
       </script>

[20190908162413354.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d51450dff8ca432e8edb44ca731b3483.png
[20190908163230379.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4d6391e90b15478e83b44a071dcc48db.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JQ实现简单的自动轮播图效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

傷城~/ 2023年03月02日 07:38/ 0 赞/ 197 阅读

相关轮播图

![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head>

布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 348 阅读

相关 JQ轮播(左右轮播切换，小圆点hover)

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

缺乏、安全感/ 2022年06月03日 00:39/ 0 赞/ 261 阅读

相关简易轮播图，走马灯，幻灯片(html+css+jq)

今天做一个简易轮播图首先做轮播图没有好看的图片怎么行，准备三张大小一致的图片，图片1图片2图片3。 01.jpg ![01.jpg][] 02.jpg ![0

淡淡的烟草味﹌/ 2022年03月27日 13:08/ 0 赞/ 532 阅读

相关 JQ代码实现轮播图功能

轮播图一般是横向滚动，我自己做了一个竖向滚动的轮播图，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

约定不等于承诺〃/ 2022年03月20日 07:50/ 0 赞/ 200 阅读

相关轮播图

本文转载至菜鸟教程，仅做笔记之用，方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head>

秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 506 阅读

相关轮播图

CSS样式 { margin: 0; padding: 0; list-style: none

柔情只为你懂/ 2021年11月23日 13:56/ 0 赞/ 540 阅读

相关 JQ实现轮播图

<script> $(function(){ var t; var index=

小鱼儿/ 2021年09月19日 01:18/ 0 赞/ 445 阅读

相关 jq 呼吸轮播图

问题: 淡入淡出时间清除动画累积代码示例： <html> <head lang="en"> <meta charset="UTF

小灰灰/ 2021年07月25日 02:31/ 0 赞/ 387 阅读

相关 jq swiper(各种轮播图样式)

具体样式教程查看地址[swiper][] 各种样式引用地址[各种样式][Link 1] 引入swiper.min.css文件 swiper.jqu

客官°小女子只卖身不卖艺/ 2021年07月24日 12:32/ 0 赞/ 666 阅读