使用js做一个无缝轮播的功能
2020-06-25 13:55:43 前端 173

无缝轮播

$(function() {
   var i = 0;
   var clone = $(".banner .bannerimg li").first().clone(); //克隆第一张图片
   $(".banner .bannerimg").append(clone); //把克隆好的添加上
   var size = $(".banner .bannerimg li").size(); //获取图片的数量

   //添加指示器
  for(var j = 0; j < size - 1; j++) {
     $(".banner .num").append("<li></li>");
  }

  $(".banner .num li").first().addClass("on");

  //向左移动函数
  function moveL() {
    i++;
    if(i >= size) {
      $(".banner .bannerimg").css({
        left: 0
      });
      i = 1;
    }
    $(".banner .bannerimg").stop().animate({
        left: -i * 600
    }, 500);
    if(i == size - 1) {
      $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
    } else {
      $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
    }

  }

  //向右移动函数
  function moveR() {
    i--;
    if(i < 0) {
      $(".banner .bannerimg").css({
        left: -(size - 1) * 600
      });
      i = size - 2;
    }
    $(".banner .bannerimg").animate({
      left: -i * 600
    });
    $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");

  }

  $(".banner .num li").hover(function() {
    var index = $(this).index(); //获取索引值
    i = index;
    $(".banner .bannerimg").stop().animate({
      left: -index * 600
    }, 500);
    $(this).addClass("on").siblings().removeClass("on");
  });

  //自动轮播
  var t = setInterval(moveL, 2000);
  $(".banner").hover(function() {
    clearInterval(t);
  }, function() {
    t = setInterval(moveL, 2000);
  });

  $(".banner .btnl").click(moveR);
  $(".banner .btnr").click(moveL);

});
一个不断学习的前端小菜鸟
永远不要放弃你那颗追梦之心 up up~