devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

jQuery实现轮播图_jquery.superslide.2.1.1

作者：笔触狂放9 | 2024-02-20 19:23:56

赞

踩

jquery.superslide.2.1.1

css样式

  1.  
  2. <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>//导入jQuery文件
  4. <style>
  5.     *{margin: 0;padding: 0}
  6.     li{list-style: none}
  7.     .bnner{
  8.         width: 820px;
  9.         position: relative;
  10.         margin: 0 auto;
  11.     }
  12.     .nav{
  13.         width: 820px;
  14.         height: 340px;
  15.         border: 1px solid;
  16.         overflow: hidden;
  17.     }
  18.     .nav_img{
  19.         float: left;
  20.         margin-left: 0px;
  21.         width: 4120px;
  22.         font-size: 0;
  23.     }
  24.     .nav_xiao{
  25.         position: absolute;
  26.         bottom: 0;
  27.         left: 50%;
  28.         transform: translateX(-50%);
  30.     }
  31.     .nav_xiao>ul{
  32.         display: flex;
  33.     }
  34.     .nav_xiao>ul>li{
  35.         width: 30px;
  36.         height: 30px;
  37.         border-radius: 50%;
  38.         background: #0da0b4;
  39.         margin-left: 5px;
  40.     }
  41.     .nav_xiao>ul .mos{
  42.         background: red;
  43.     }
  44.     .nav_left>div:nth-child(1){
  45.         position: absolute;
  46.         left: 0;
  47.         top: 50%;
  48.         font-size: 35px;
  49.         border: 1px solid red;
  50.     }
  51.     .nav_left>div:nth-child(2){
  52.         position: absolute;
  53.         right: 0;
  54.         top: 50%;
  55.         font-size: 35px;
  56.         border: 1px solid red;
  57.     }
  58. </style>

html结构

  1. <div class="bnner">
  2.     <div class="nav">
  3.     <div class="nav_img">
  4.         <img src="imgs/1.jpeg" alt="">
  5.         <img src="imgs/2.jpeg" alt="">
  6.         <img src="imgs/3.jpeg" alt="">
  7.         <img src="imgs/2.jpeg" alt="">
  8.         <img src="imgs/3.jpeg" alt="">
  9.     </div>
  10. </div>
  11.     <div class="nav_xiao">
  12.         <ul>
  13.             <li class="mos"></li>
  14.             <li></li>
  15.             <li></li>
  16.             <li></li>
  17.             <li></li>
  18.         </ul>
  19.     </div>
  20.     <div class="nav_left">
  21.         <div>左</div>
  22.         <div>右</div>
  23.     </div>
  24. </div>

jQuery代码

  1. <script>
  2.  
  3.     //图片
  4.     let ss=-820;//图片大小
  5.     let sum=0; //自定义的索引下标
  6.     function move(){    //开启定时器
  7.         sum++;           //自定义的索引下标自增
  8.         if (sum>=5){    //图片就五张不能让他大于5
  9.             sum=0       //否则归零
  10.         }
  11.         $('.nav_xiao li').css('background','#0da0b4') //清空小圆点的颜色
  12.         $('.nav_xiao li').eq(sum).css('background','red')//让当前跟图片对应的小圆点显示
  13.         $('.nav_img').animate({         //animate动画用于过度
  14.             'margin-left':ss*sum        //让当前下标乘图片宽 等于现在的位置
  15.         },500)                          //500毫秒的延迟
  16.     }
  17.  
  18.     //右
  19.         $('.nav_left div:nth-child(2)').on('click',function(){ //右击按钮
  20.         sum++                       //拿到当前自定义的索引下标 每点一下就让他加一
  21.         if (sum>=5){                //如果大于等于五就让他归零
  22.             sum=0
  23.         }
  24.         $('.nav_img').animate({     //让宽度乘以现在的下标索引
  25.             'margin-left':ss*sum
  26.         },500)
  27.         $('.nav_xiao li').css('background','#0da0b4') //小圆点的样式，初始化
  28.         $('.nav_xiao li').eq(sum).css('background','red')
  29.     })
  30.  
  31.     $('.bnner').on('mouseenter',function(){    //移入停止定时器
  32.         clearInterval(time)
  33.     }).on('mouseleave',function(){          //移出开启定时器
  34.          time = setInterval(move,indexs)
  35.     })
  36.     //左
  37.     $('.nav_left div:nth-child(1)').on('click',function(){
  38.         sum--                       //拿到当前自定义的索引下标 每点一下就让他减一
  39.         if (sum<0){                 //同上判断
  40.             sum=4                   //满足条件重新赋值
  41.         }
  42.         $('.nav_img').animate({
  43.             'margin-left':ss*sum    //让宽度乘以现在的下标索引
  44.         },500)
  45.         $('.nav_xiao li').css('background','#0da0b4')
  46.         $('.nav_xiao li').eq(sum).css('background','red')
  47.     })
  48.     //小圆点
  49.     $('.nav_xiao li').each(function(index,ele){ //用each循环当前小圆点
  50.         $(this).on('mouseenter',function(){     //每次移入当前移入的小圆点时触发的事件,这里的事件可以换成click
  51.             $('.nav_xiao li').css('background','#0da0b4') //初始化样式
  52.             $(this).css('background','red')             //让当前鼠标移入的小圆点样式变更
  53.             $('.nav_img').css('margin-left',ss*index)   //让当前移入的小圆点的索引乘以宽度
  54.             sum=index       //把当前触发索引给sum自定义下标索引
  55.         })
  56.     })
  57.     let time=setInterval(move,2000)
  58.     
  59. </script>

 

下面这个是后来加的 无缝滚动轮播图 在最后面 加一张 第一张图片

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  7. </head>
  8.  
  9. <style>
  10.     *{margin: 0;padding: 0}
  11.     li{list-style: none}
  12.     .bnner{
  13.         width: 820px;       //图片多大这里就设多大
  14.         position: relative;
  15.         margin: 0 auto;
  16.     }
  17.     .nav{
  18.         width: 820px;  //图片多大这里就设多大
  19.         height: 340px;
  20.         border: 1px solid;
  21.         overflow: hidden;
  22.     }
  23.     .nav_img{
  24.         float: left;
  25.         margin-left: 0px;
  26.         width: 4950px;    //总长度
  27.         font-size: 0;
  28.     }
  29.     .nav_xiao{
  30.         position: absolute;
  31.         bottom: 0;
  32.         left: 50%;
  33.         transform: translateX(-50%);
  34.  
  35.     }
  36.     .nav_xiao>ul{
  37.         display: flex;
  38.     }
  39.     .nav_xiao>ul>li{
  40.         width: 30px;
  41.         height: 30px;
  42.         border-radius: 50%;
  43.         background: #0da0b4;
  44.         margin-left: 5px;
  45.     }
  46.     .nav_xiao>ul .mos{
  47.         background: red;
  48.     }
  49.     .nav_left>div:nth-child(1){
  50.         position: absolute;
  51.         left: 0;
  52.         top: 50%;
  53.         font-size: 35px;
  54.         border: 1px solid red;
  55.     }
  56.     .nav_left>div:nth-child(2){
  57.         position: absolute;
  58.         right: 0;
  59.         top: 50%;
  60.         font-size: 35px;
  61.         border: 1px solid red;
  62.     }
  63.     .bnner_er ul>li>img{
  64.         width: 120px;
  65.         height: 120px;
  66.     }
  67.  
  68.     .bnner_er>div{
  69.         width: 250px;
  70.         overflow: hidden;
  71.     }
  72.     .bnner_er ul{
  73.         width: 1008px;
  74.         /*display: flex;*/
  75.         /*overflow: hidden;*/
  76.     }
  77.     .bnner_er ul>li{
  78.         width: 250px;
  79.         height: 120px;
  80.         float: left;
  81.         border: 1px solid red;
  82.     }
  83. </style>
  84. <body>
  85. <div class="bnner">
  86.     <div class="nav">
  87.     <div class="nav_img">
  88.         <img src="imgs/1.jpeg" alt="">
  89.         <img src="imgs/2.jpeg" alt="">
  90.         <img src="imgs/3.jpeg" alt="">
  91.         <img src="imgs/2.jpeg" alt="">
  92.         <img src="imgs/3.jpeg" alt="">
  93.         <img src="imgs/1.jpeg" alt="">
  94.     </div>
  95. </div>
  96.     <div class="nav_xiao">
  97.         <ul>
  98.             <li class="mos"></li>
  99.             <li></li>
  100.             <li></li>
  101.             <li></li>
  102.             <li></li>
  103.         </ul>
  104.     </div>
  105.     <div class="nav_left">
  106.         <div>左</div>
  107.         <div>右</div>
  108.     </div>
  109. </div>
  110.  
  111.  
  112. <script>
  113.  
  114. function f(indexs) {
  115.     $('.bnner').on('mouseenter',function(){
  116.         clearInterval(time)
  117.         console.log(111)
  118.     }).on('mouseleave',function(){
  119.          time = setInterval(move,indexs)
  120.     })
  121.         //图片
  122.      let ssd=$('.nav').width()
  123.     console.log(ssd)
  124.     let ss=-ssd;
  125.     let sum=0;
  126.     function move(){
  127.         sum++;
  128.         if (sum>=6){
  129.             $('.nav_img').css({
  130.             'margin-left':0
  131.         });
  132.  
  133.             sum=1
  134.         }
  135.         console.log(sum)
  136.         $('.nav_xiao li').css('background','#0da0b4')
  137.         $('.nav_xiao li').eq(sum).css('background','red')
  138.         $('.nav_img').animate({
  139.             'margin-left':ss*sum
  140.         },500)
  141.         if (sum==5){
  142.             $('.nav_xiao li').css('background','#0da0b4')
  143.             $('.nav_xiao li').eq(0).css('background','red')
  144.         }
  145.     }
  146.  
  147.     //右
  148.         $('.nav_left div:nth-child(2)').on('click',function(){
  149.         // function mover(){
  150.             sum++
  151.         if (sum>=6){
  152.              $('.nav_img').css({
  153.             'margin-left':0
  154.         });
  155.             sum=1
  156.         }
  157.         $('.nav_img').stop().animate({
  158.             'margin-left':ss*sum
  159.         },500)
  160.         $('.nav_xiao li').css('background','#0da0b4')
  161.         $('.nav_xiao li').eq(sum).css('background','red')
  162.         // }
  163.             if (sum==5){
  164.             $('.nav_xiao li').css('background','#0da0b4')
  165.             $('.nav_xiao li').eq(0).css('background','red')
  166.         }
  167.     })
  168.     //左
  169.     $('.nav_left div:nth-child(1)').on('click',function(){
  170.         sum--;
  171.         if (sum<0){
  172.             $('.nav_img').css({
  173.             'margin-left':-4100  //最后一张图片的起始距离 注意并不是总长度 总长度-一张的长度
  174.         })
  175.             sum=4
  176.         }
  177.         console.log(sum)
  178.         $('.nav_img').animate({
  179.             'margin-left':ss*sum
  180.         })
  181.         $('.nav_xiao li').css('background','#0da0b4')
  182.         $('.nav_xiao li').eq(sum).css('background','red')
  183.     });
  184.     //小圆点
  185.     $('.nav_xiao li').each(function(index,ele){
  186.         $(this).on('click',function(){
  187.             $('.nav_xiao li').css('background','#0da0b4')
  188.             $(this).css('background','red')
  189.             $('.nav_img').animate({
  190.                 'margin-left':ss*index
  191.             })
  192.             sum=index
  193.         })
  194.     })
  195.     let time = setInterval(move,indexs)
  196. }
  197.  
  198.  
  199. f(2000);
  200. </script>
  201.  
  202. </body>
  203. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/120700
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号