jquery无缝轮播事Dome

Posted 2020-09-13 MrLQZ

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery无缝轮播事Dome相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播</title>
    <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <style type="text/css">
     *{margin:0;padding:0;list-style:none;}
    .banner{position:relative;overflow:hidden;margin:100px auto;width:500px;height:300px;border:1px solid grey;}
    .banner .img{position:absolute;top:0;left:0;width:5000px;}
    .banner .img img{width:500px;height:300px;}
    .banner .img li{float:left;}
    .banner .img li a{display:block;border:none;}
    .banner .num{position:absolute;bottom:10px;left:0;width:100%;text-align:center;font-size:0;}
    .banner .num li{display:inline-block;margin:0 3px;width:10px;height:10px;border-radius:50%;background-color:#888;cursor:pointer;}
    .banner .num li.on{background-color:#ff6a00;}
    .banner .btn{position:absolute;top:50%;display:none;margin-top:-25px;width:30px;height:50px;background-color:grey;color:#fff;text-align:center;font-size:40px;font-family:"宋体";line-height:50px;opacity:.5;cursor:pointer;filter:alpha(opacity:.5);}
    .banner .btn_l{left:0;}
    .banner .btn_r{right:0;}
    .banner:hover .btn{display:block;}
  </style>
</head>
<body>
    <div class="banner">
    <ul class="img">
        <li><a href="#"><img src="image/qsmy1.png" /></a></li>
        <li><a href="#"><img src="image/qsmy2.png" /></a></li>
        <li><a href="#"><img src="image/qsmy3.png" /></a></li>
        <li><a href="#"><img src="image/qsmy4.png" /></a></li>
    </ul>
    <ul class="num">
    </ul>
    <div class="btn btn_l">&lt;</div>
    <div class="btn btn_r">&gt;</div>
  </div>
</body>
<script type="text/javascript">
$(function() {
  var i = 0;
  var clone = $(".banner .img li").first().clone(); //克隆第一张图片
  $(".banner .img").append(clone); //复制到列表最后
  var size = $(".banner .img li").size();
  for (var j = 0; j < size - 1; j++) {
    $(".banner .num").append("<li></li>");
  }
  $(".banner .num li").first().addClass("on");
  /*自动轮播*/
  var t = setInterval(function() {
    i++;
    move();
  }, 2000);
  /*鼠标悬停事件*/
  $(".banner").hover(function() {
    clearInterval(t); //鼠标悬停时清除定时器
  }, function() {
    t = setInterval(function() {
      i++;
      move();
    }, 2000); //鼠标移出时清除定时器
  });
  /*鼠标滑入原点事件*/
  $(".banner .num li").hover(function() {

    var index = $(this).index(); //获取当前索引值
    i = index;
    $(".banner .img").stop().animate({
      left: -index * 500
    }, 500);
    $(this).addClass("on").siblings().removeClass("on");
  });
  /*向左按钮*/
  $(".banner .btn_l").click(function() {
    i++;
    move();
  })
  /*向右按钮*/
  $(".banner .btn_r").click(function() {
    i--;
    move();
  })

  /*移动事件*/
  function move() {
    if (i == size) {
      $(".banner .img").css({
        left: 0
      });
      i = 1;
    }
    if (i == -1) {
      $(".banner .img").css({
        left: -(size - 1) * 500
      });
      i = size - 2;
    }
    $(".banner .img").stop().animate({
      left: -i * 500
    }, 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");
    }
  }
});
</script>
</html>

以上是关于jquery无缝轮播事Dome的主要内容，如果未能解决你的问题，请参考以下文章

jQuery插件版无缝轮播，重写了之前的代码，显得更高大上一点