新手向 Jquery无缝滚动轮播图

最新推荐文章于 2022-11-01 11:27:13 发布

＊大脸猫Katee

最新推荐文章于 2022-11-01 11:27:13 发布

阅读量228

点赞数

分类专栏：笔记文章标签： Jquery

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无限循环滚动轮播</title>
  <style>
    .carousel {
      margin: 0 auto;
      margin-top: 200px;
    }
    .carousel ul,
    .carousel li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .carousel .img-ct img {
      width: 400px;
      height: 250px;
    }

    /*触发BFC，清除浮动*/
    .carousel .img-ct {
      position: absolute;
      overflow: hidden;
    }

    /*让需要轮播的图片水平浮动排列一排*/
    .carousel .img-ct li {
      float: left;
    }
    
    /*创造可视窗口，大小等于一个图片的宽度，溢出部分不展示*/
    .carousel {
      position: relative;
      width: 400px;
      height: 250px;
      overflow: hidden;
    }
    
    /*设置左右播放按钮的样式*/
    .carousel .arrow {
      position: absolute;
      top: 50%;
      margin-top: -15px;
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid #fff;
      line-height: 30px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      text-decoration: none;
    }
    .carousel .arrow:hover {
      opacity: 0.7;
    }
    .carousel .pre {
      left: 10px;
    }
    .carousel .next {
      right: 10px;
    }
    
    /*设置图片上的四个小按钮*/
    .carousel .bullet {
      position: absolute;
      width: 100%;
      /*子元素不是浮动元素，不用设置高度*/
      bottom: 10px;
      text-align: center;
    }
    .carousel .bullet >li {
      display: inline-block;
      width: 30px;
      height: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      /*设置inline-block会出现缝隙问题，解决方法设置font-size: 0;*/
      font-size: 0;
    }
    .carousel .bullet >li.active {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="carousel">
    <ul class="img-ct">
      <li><a href="javascript:void(0)">![图片加载失败](https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzE5NjkzMTAtZGU5ZTVmOTE5MWI3MTczYy5qcGc)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzE5NjkzMTAtODYxNDM2MmM2NGM0YWMxYy5qcGc)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzE5NjkzMTAtZmM1NThiYWY4YjUzYTVjNy5qcGc)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzE5NjkzMTAtM2NlYjUxMGZlZGFhODVjOC5qcGc)</a></li>
    </ul>
    <a href="#" class="pre arrow"><</a>
    <a href="#" class="next arrow">></a>
    <ul class="bullet">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script>
    var $imgCt = $('.img-ct'),
        $imgWidth = $('.carousel .img-ct >li').eq(0).width(),
        $imgLen = $('.carousel .img-ct >li').length,
        $preBtn = $('.carousel .pre'),
        $nextBtn = $('.carousel .next'),
        $bullet = $('.bullet li'),
        //设置状态锁
        lock = false,
        //设置计时器
        clock,
        //记录当前所在页面
        currentIndex = 0;



    var $last = $imgCt.children("li").last().clone(),
        $first = $imgCt.children("li").first().clone();
    
    //在图片列表开头和结尾分别添加最后一张图和第一张图，这时图片的个数变为6，而$imgLen值还是4，不是动态改变的
    $imgCt.append($first);
    $imgCt.prepend($last);

    $imgCt.css({
      //因为轮播的图片个数可以根据需求改变，所以$imgCt的宽度不应该写死，而应该动态计算
      width: $imgWidth*($imgLen+2),
      left: -$imgWidth
    })


    $preBtn.on('click',function(){
      playPre(1);
    })
    $nextBtn.on('click',function(){
      playNext(1);
    })

    timeClock();

    //当鼠标在图片上停留时，停止自动轮播
    $(".carousel").on("mouseenter",function(){
        clearInterval(clock)
    })
    //当鼠标离开时，开始自动轮播
    $(".carousel").on("mouseleave",function(){
        timeClock()
    })

    function playNext(len){
      //设置状态锁防止滚动过程中重复点击
      if(lock){
        return;
      }
      lock = true
      $imgCt.animate({
        left: '-='+len*$imgWidth
      },function(){
        currentIndex+=len;
        if (currentIndex === $imgLen) {
          currentIndex = 0;
          $imgCt.css({left: -$imgWidth})
        }
        setBullet();
        lock = false;
      })
    }
    function playPre(len){
      if(lock){
        return;
      }
      lock = true
      $imgCt.animate({
        left: '+='+len*$imgWidth
      },function(){
        currentIndex-=len;
        if (currentIndex === -1) {
          currentIndex = $imgLen-1;
          $imgCt.css({left: -$imgLen*$imgWidth})
        }
        //当滚动到某个图片时，为其对应的小按钮设置样式
        setBullet();
        lock = false;
      })
    }

    //点击小按钮滚动到对应图片上
    $bullet.on('click',function(){
      var index = $(this).index();
      if(index > currentIndex){
        playNext(index - currentIndex)
      }else if(index < currentIndex){
        playPre(currentIndex - index);
      }
    })

    function setBullet(){
      $bullet.removeClass('active')
             .eq(currentIndex)
             .addClass('active')
    }

    //自动轮播，每个一秒滚动一次
    function timeClock(){
      clock = setInterval(function(){
         playNext(1)
       },1000)
    }
  </script>
</body>
</html>

＊大脸猫Katee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新手向 Jquery无缝滚动轮播图

无限循环滚动轮播 (https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzE5NjkzMTAtZGU5ZTVmOTE5MWI3MTczYy5qcGc) (https://imgconvert.csdn...
复制链接

扫一扫