jquery实现无缝轮播banner

Author： Seantim
发布时间：July 2, 2019
1435views
No comments
11038 words
Categories：前端日志

效果

html

<div id="banner">
  <!-- 图片区域 -->
  <ul id="banner_img" style="transition:all 0.3s linear;left: 0;">
    <li>
      <a href="javascript:;" title="轮播1">
        <img src="images/banner1.jpg" title="轮播广告1">
      </a>
    </li>
    <li>
      <a href="javascript:;" title="轮播2">
        <img src="images/banner2.jpg" title="轮播广告2">
      </a>
    </li>
    <li>
      <a href="javascript:;" title="轮播3">
        <img src="images/banner3.jpg" title="轮播广告3">
      </a>
    </li>
    <li>
      <a href="javascript:;" title="轮播4">
        <img src="images/banner4.jpg" title="轮播广告4">
      </a>
    </li>
    <li>
      <!-- 为了衔接轮播效果在结尾添加第一个banner图 -->
      <a href="javascript:;" title="轮播1">
        <img src="images/banner1.jpg" title="轮播广告1">
      </a>
    </li>
  </ul>
  <!--左右按钮-->
  <a href="javascript:;" id="btn_lf">〈</a>
  <a href="javascript:;" id="btn_rt">〉</a>
  <!--小圆点-->
  <ul id="dot">
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
  </ul>
</div>

css

  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  img {
    width: 960px;
    float: left;
  }

  #banner {
    width: 960px;
    height: 384px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  #banner_img {
    list-style: none;
    width: 4800px;
    margin: 0;
    padding: 0;
    position: relative;

  }

  #banner_img li {
    float: left;
  }

  #btn_lf,
  #btn_rt {
    position: absolute;
    top: 157px;
    width: 25px;
    height: 70px;
    border-radius: 3px;
    opacity: 0.5;
    transition: all .3s linear;
    background: #fff;
    text-decoration: none;
    line-height: 70px;
    color: #000;
    font-weight: 900;
  }

  #btn_lf:hover,
  #btn_rt:hover {
    opacity: 1;
  }

  #btn_lf {
    text-align: left;
    left: 5px;
  }

  #btn_rt {
    text-align: right;
    right: 5px;
  }

  #dot {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -34px;
  }

  #dot li {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    float: left;
    margin-right: 5px;
    transition: all .2s linear;
  }

  .hover {
    cursor: pointer;
    background: orange !important;
  }

javascript

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
  //自动轮播
  const WIDTH = 960; //banner宽度
  var
    timer = null,
    i = 0, //用于计算轮播的序号，
    $banner = $("#banner_img"), //定义变量保存当前banner的ul
    len = $banner.children("li").length, //定义变量保存li的个数
    $dot = $("#dot"); //小圆点
  $dot.children(":first").addClass("hover"); //第一个小圆点添加hover样式
  //轮播
  function move() {
    timer = setTimeout(() => {
      if (i < len - 1) { //如果i小于当前banner数量-1
        i++;
        $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i
        move(); //重复调用
      } else {
        $banner.css({
          //否则先把transition属性设置为空，暂时其失去过渡效果
          "transition": "",
          //让left属性瞬间回到第0个banner的位置
          left: 0
        });
        i = 1; //下一个轮播为第1个banner图
        //设置定时器
        setTimeout(() => {
          $banner.css({
            //恢复transition属性
            "transition": "all .3s linear",
            //并把left属性设置到WIDTH*i的位置
            "left": -WIDTH * i
          })
        }, 5)
        move(); //重复调用
      }
    }, 3000);
    //小圆点跟随banner
    if (i < len - 1) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + 0 + ")").addClass("hover").siblings().removeClass("hover");
    }
  }
  move();

  //鼠标经过banner停止自动轮播
  $("#banner").hover(() => {
    clearTimeout(timer);

  }, () => {
    move();
  })

  //小圆点鼠标经过改变轮播
  $dot.on("mouseover", "li", function() {
    var $this = $(this);
    if (!$this.hasClass("hover")) {
      i = $this.index(); //设置i的值为当前li下的位置
      $banner.css("left", -WIDTH * i); //设置banner的left属性
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    }
  });

  //左按钮
  $("#btn_lf").click(function() {
    var $this = $(this);
    if (i >0) { //如果i小于当前banner数量-1
      i--;
      $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i
    } else {
      $banner.css({
        //否则先把transition属性设置为空，暂时其失去过渡效果
        "transition": "",
        //让left属性瞬间回到第0个banner的位置
        left: -WIDTH*(len-1)
      });
      i = 3; //下一个轮播为第1个banner图
      //设置定时器
      setTimeout(() => {
        $banner.css({
          //恢复transition属性
          "transition": "all .3s linear",
          //并把left属性设置到WIDTH*i的位置
          "left": -WIDTH * i
        });
      }, 50);
    }
    if (i >0) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    }
  });

  //右按钮
  $("#btn_rt").click(function() {
    var $this = $(this);
    if (i < len - 1) { //如果i小于当前banner数量-1
      i++;
      $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i

    } else {
      $banner.css({
        //否则先把transition属性设置为空，暂时其失去过渡效果
        "transition": "",
        //让left属性瞬间回到第0个banner的位置
        left: 0
      });
      i = 1; //下一个轮播为第1个banner图
      //设置定时器
      setTimeout(() => {
        $banner.css({
          //恢复transition属性
          "transition": "all .3s linear",
          //并把left属性设置到WIDTH*i的位置
          "left": -WIDTH * i
        });
      }, 50);
    }
    if (i < len - 1) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + 0 + ")").addClass("hover").siblings().removeClass("hover");
    }
  });
  </script>

完整代码

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>banner轮播</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <style type="text/css">
  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  img {
    width: 960px;
    float: left;
  }

  #banner {
    width: 960px;
    height: 384px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  #banner_img {
    list-style: none;
    width: 4800px;
    margin: 0;
    padding: 0;
    position: relative;

  }

  #banner_img li {
    float: left;
  }

  #btn_lf,
  #btn_rt {
    position: absolute;
    top: 157px;
    width: 25px;
    height: 70px;
    border-radius: 3px;
    opacity: 0.5;
    transition: all .3s linear;
    background: #fff;
    text-decoration: none;
    line-height: 70px;
    color: #000;
    font-weight: 900;
  }

  #btn_lf:hover,
  #btn_rt:hover {
    opacity: 1;
  }

  #btn_lf {
    text-align: left;
    left: 5px;
  }

  #btn_rt {
    text-align: right;
    right: 5px;
  }

  #dot {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -34px;
  }

  #dot li {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    float: left;
    margin-right: 5px;
    transition: all .2s linear;
  }

  .hover {
    cursor: pointer;
    background: orange !important;
  }
  </style>
</head>

<body>
  <div id="banner">
    <!-- 图片区域 -->
    <ul id="banner_img" style="transition:all 0.3s linear;left: 0;">
      <li>
        <a href="javascript:;" title="轮播1">
            <img src="images/banner1.jpg" title="轮播广告1">
          </a>
      </li>
      <li>
        <a href="javascript:;" title="轮播2">
            <img src="images/banner2.jpg" title="轮播广告2">
          </a>
      </li>
      <li>
        <a href="javascript:;" title="轮播3">
            <img src="images/banner3.jpg" title="轮播广告3">
          </a>
      </li>
      <li>
        <a href="javascript:;" title="轮播4">
            <img src="images/banner4.jpg" title="轮播广告4">
          </a>
      </li>
      <li>
        <!-- 为了衔接轮播效果在结尾添加第一个banner图 -->
        <a href="javascript:;" title="轮播1">
            <img src="images/banner1.jpg" title="轮播广告1">
          </a>
      </li>
    </ul>
    <!--左右按钮-->
    <a href="javascript:;" id="btn_lf">〈</a>
    <a href="javascript:;" id="btn_rt">〉</a>
    <!--小圆点-->
    <ul id="dot">
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
  //自动轮播
  const WIDTH = 960; //banner宽度
  var
    timer = null,
    i = 0, //用于计算轮播的序号，
    $banner = $("#banner_img"), //定义变量保存当前banner的ul
    len = $banner.children("li").length, //定义变量保存li的个数
    $dot = $("#dot"); //小圆点
  $dot.children(":first").addClass("hover"); //第一个小圆点添加hover样式
  //轮播
  function move() {
    timer = setTimeout(() => {
      if (i < len - 1) { //如果i小于当前banner数量-1
        i++;
        $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i
        move(); //重复调用
      } else {
        $banner.css({
          //否则先把transition属性设置为空，暂时其失去过渡效果
          "transition": "",
          //让left属性瞬间回到第0个banner的位置
          left: 0
        });
        i = 1; //下一个轮播为第1个banner图
        //设置定时器
        setTimeout(() => {
          $banner.css({
            //恢复transition属性
            "transition": "all .3s linear",
            //并把left属性设置到WIDTH*i的位置
            "left": -WIDTH * i
          })
        }, 5)
        move(); //重复调用
      }
    }, 3000);
    //小圆点跟随banner
    if (i < len - 1) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + 0 + ")").addClass("hover").siblings().removeClass("hover");
    }
  }
  move();

  //鼠标经过banner停止自动轮播
  $("#banner").hover(() => {
    clearTimeout(timer);

  }, () => {
    move();
  })

  //小圆点鼠标经过改变轮播
  $dot.on("mouseover", "li", function() {
    var $this = $(this);
    if (!$this.hasClass("hover")) {
      i = $this.index(); //设置i的值为当前li下的位置
      $banner.css("left", -WIDTH * i); //设置banner的left属性
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    }
  });

  //左按钮
  $("#btn_lf").click(function() {
    var $this = $(this);
    if (i >0) { //如果i小于当前banner数量-1
      i--;
      $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i
    } else {
      $banner.css({
        //否则先把transition属性设置为空，暂时其失去过渡效果
        "transition": "",
        //让left属性瞬间回到第0个banner的位置
        left: -WIDTH*(len-1)
      });
      i = 3; //下一个轮播为第1个banner图
      //设置定时器
      setTimeout(() => {
        $banner.css({
          //恢复transition属性
          "transition": "all .3s linear",
          //并把left属性设置到WIDTH*i的位置
          "left": -WIDTH * i
        });
      }, 50);
    }
    if (i >0) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    }
  });

  //右按钮
  $("#btn_rt").click(function() {
    var $this = $(this);
    if (i < len - 1) { //如果i小于当前banner数量-1
      i++;
      $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i

    } else {
      $banner.css({
        //否则先把transition属性设置为空，暂时其失去过渡效果
        "transition": "",
        //让left属性瞬间回到第0个banner的位置
        left: 0
      });
      i = 1; //下一个轮播为第1个banner图
      //设置定时器
      setTimeout(() => {
        $banner.css({
          //恢复transition属性
          "transition": "all .3s linear",
          //并把left属性设置到WIDTH*i的位置
          "left": -WIDTH * i
        });
      }, 50);
    }
    if (i < len - 1) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + 0 + ")").addClass("hover").siblings().removeClass("hover");
    }
  });
  </script>
</body>

</html>

jquery实现无缝轮播banner

Seantim • 2019 年 07 月 02 日

效果

html

<div id="banner">
  <!-- 图片区域 -->
  <ul id="banner_img" style="transition:all 0.3s linear;left: 0;">
    <li>
      <a href="javascript:;" title="轮播1">
        <img src="images/banner1.jpg" title="轮播广告1">
      </a>
    </li>
    <li>
      <a href="javascript:;" title="轮播2">
        <img src="images/banner2.jpg" title="轮播广告2">
      </a>
    </li>
    <li>
      <a href="javascript:;" title="轮播3">
        <img src="images/banner3.jpg" title="轮播广告3">
      </a>
    </li>
    <li>
      <a href="javascript:;" title="轮播4">
        <img src="images/banner4.jpg" title="轮播广告4">
      </a>
    </li>
    <li>
      <!-- 为了衔接轮播效果在结尾添加第一个banner图 -->
      <a href="javascript:;" title="轮播1">
        <img src="images/banner1.jpg" title="轮播广告1">
      </a>
    </li>
  </ul>
  <!--左右按钮-->
  <a href="javascript:;" id="btn_lf">〈</a>
  <a href="javascript:;" id="btn_rt">〉</a>
  <!--小圆点-->
  <ul id="dot">
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
  </ul>
</div>

css

  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  img {
    width: 960px;
    float: left;
  }

  #banner {
    width: 960px;
    height: 384px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  #banner_img {
    list-style: none;
    width: 4800px;
    margin: 0;
    padding: 0;
    position: relative;

  }

  #banner_img li {
    float: left;
  }

  #btn_lf,
  #btn_rt {
    position: absolute;
    top: 157px;
    width: 25px;
    height: 70px;
    border-radius: 3px;
    opacity: 0.5;
    transition: all .3s linear;
    background: #fff;
    text-decoration: none;
    line-height: 70px;
    color: #000;
    font-weight: 900;
  }

  #btn_lf:hover,
  #btn_rt:hover {
    opacity: 1;
  }

  #btn_lf {
    text-align: left;
    left: 5px;
  }

  #btn_rt {
    text-align: right;
    right: 5px;
  }

  #dot {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -34px;
  }

  #dot li {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    float: left;
    margin-right: 5px;
    transition: all .2s linear;
  }

  .hover {
    cursor: pointer;
    background: orange !important;
  }

javascript

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
  //自动轮播
  const WIDTH = 960; //banner宽度
  var
    timer = null,
    i = 0, //用于计算轮播的序号，
    $banner = $("#banner_img"), //定义变量保存当前banner的ul
    len = $banner.children("li").length, //定义变量保存li的个数
    $dot = $("#dot"); //小圆点
  $dot.children(":first").addClass("hover"); //第一个小圆点添加hover样式
  //轮播
  function move() {
    timer = setTimeout(() => {
      if (i < len - 1) { //如果i小于当前banner数量-1
        i++;
        $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i
        move(); //重复调用
      } else {
        $banner.css({
          //否则先把transition属性设置为空，暂时其失去过渡效果
          "transition": "",
          //让left属性瞬间回到第0个banner的位置
          left: 0
        });
        i = 1; //下一个轮播为第1个banner图
        //设置定时器
        setTimeout(() => {
          $banner.css({
            //恢复transition属性
            "transition": "all .3s linear",
            //并把left属性设置到WIDTH*i的位置
            "left": -WIDTH * i
          })
        }, 5)
        move(); //重复调用
      }
    }, 3000);
    //小圆点跟随banner
    if (i < len - 1) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + 0 + ")").addClass("hover").siblings().removeClass("hover");
    }
  }
  move();

  //鼠标经过banner停止自动轮播
  $("#banner").hover(() => {
    clearTimeout(timer);

  }, () => {
    move();
  })

  //小圆点鼠标经过改变轮播
  $dot.on("mouseover", "li", function() {
    var $this = $(this);
    if (!$this.hasClass("hover")) {
      i = $this.index(); //设置i的值为当前li下的位置
      $banner.css("left", -WIDTH * i); //设置banner的left属性
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    }
  });

  //左按钮
  $("#btn_lf").click(function() {
    var $this = $(this);
    if (i >0) { //如果i小于当前banner数量-1
      i--;
      $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i
    } else {
      $banner.css({
        //否则先把transition属性设置为空，暂时其失去过渡效果
        "transition": "",
        //让left属性瞬间回到第0个banner的位置
        left: -WIDTH*(len-1)
      });
      i = 3; //下一个轮播为第1个banner图
      //设置定时器
      setTimeout(() => {
        $banner.css({
          //恢复transition属性
          "transition": "all .3s linear",
          //并把left属性设置到WIDTH*i的位置
          "left": -WIDTH * i
        });
      }, 50);
    }
    if (i >0) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    }
  });

  //右按钮
  $("#btn_rt").click(function() {
    var $this = $(this);
    if (i < len - 1) { //如果i小于当前banner数量-1
      i++;
      $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i

    } else {
      $banner.css({
        //否则先把transition属性设置为空，暂时其失去过渡效果
        "transition": "",
        //让left属性瞬间回到第0个banner的位置
        left: 0
      });
      i = 1; //下一个轮播为第1个banner图
      //设置定时器
      setTimeout(() => {
        $banner.css({
          //恢复transition属性
          "transition": "all .3s linear",
          //并把left属性设置到WIDTH*i的位置
          "left": -WIDTH * i
        });
      }, 50);
    }
    if (i < len - 1) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + 0 + ")").addClass("hover").siblings().removeClass("hover");
    }
  });
  </script>

完整代码

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>banner轮播</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <style type="text/css">
  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  img {
    width: 960px;
    float: left;
  }

  #banner {
    width: 960px;
    height: 384px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  #banner_img {
    list-style: none;
    width: 4800px;
    margin: 0;
    padding: 0;
    position: relative;

  }

  #banner_img li {
    float: left;
  }

  #btn_lf,
  #btn_rt {
    position: absolute;
    top: 157px;
    width: 25px;
    height: 70px;
    border-radius: 3px;
    opacity: 0.5;
    transition: all .3s linear;
    background: #fff;
    text-decoration: none;
    line-height: 70px;
    color: #000;
    font-weight: 900;
  }

  #btn_lf:hover,
  #btn_rt:hover {
    opacity: 1;
  }

  #btn_lf {
    text-align: left;
    left: 5px;
  }

  #btn_rt {
    text-align: right;
    right: 5px;
  }

  #dot {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -34px;
  }

  #dot li {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    float: left;
    margin-right: 5px;
    transition: all .2s linear;
  }

  .hover {
    cursor: pointer;
    background: orange !important;
  }
  </style>
</head>

<body>
  <div id="banner">
    <!-- 图片区域 -->
    <ul id="banner_img" style="transition:all 0.3s linear;left: 0;">
      <li>
        <a href="javascript:;" title="轮播1">
            <img src="images/banner1.jpg" title="轮播广告1">
          </a>
      </li>
      <li>
        <a href="javascript:;" title="轮播2">
            <img src="images/banner2.jpg" title="轮播广告2">
          </a>
      </li>
      <li>
        <a href="javascript:;" title="轮播3">
            <img src="images/banner3.jpg" title="轮播广告3">
          </a>
      </li>
      <li>
        <a href="javascript:;" title="轮播4">
            <img src="images/banner4.jpg" title="轮播广告4">
          </a>
      </li>
      <li>
        <!-- 为了衔接轮播效果在结尾添加第一个banner图 -->
        <a href="javascript:;" title="轮播1">
            <img src="images/banner1.jpg" title="轮播广告1">
          </a>
      </li>
    </ul>
    <!--左右按钮-->
    <a href="javascript:;" id="btn_lf">〈</a>
    <a href="javascript:;" id="btn_rt">〉</a>
    <!--小圆点-->
    <ul id="dot">
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
  //自动轮播
  const WIDTH = 960; //banner宽度
  var
    timer = null,
    i = 0, //用于计算轮播的序号，
    $banner = $("#banner_img"), //定义变量保存当前banner的ul
    len = $banner.children("li").length, //定义变量保存li的个数
    $dot = $("#dot"); //小圆点
  $dot.children(":first").addClass("hover"); //第一个小圆点添加hover样式
  //轮播
  function move() {
    timer = setTimeout(() => {
      if (i < len - 1) { //如果i小于当前banner数量-1
        i++;
        $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i
        move(); //重复调用
      } else {
        $banner.css({
          //否则先把transition属性设置为空，暂时其失去过渡效果
          "transition": "",
          //让left属性瞬间回到第0个banner的位置
          left: 0
        });
        i = 1; //下一个轮播为第1个banner图
        //设置定时器
        setTimeout(() => {
          $banner.css({
            //恢复transition属性
            "transition": "all .3s linear",
            //并把left属性设置到WIDTH*i的位置
            "left": -WIDTH * i
          })
        }, 5)
        move(); //重复调用
      }
    }, 3000);
    //小圆点跟随banner
    if (i < len - 1) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + 0 + ")").addClass("hover").siblings().removeClass("hover");
    }
  }
  move();

  //鼠标经过banner停止自动轮播
  $("#banner").hover(() => {
    clearTimeout(timer);

  }, () => {
    move();
  })

  //小圆点鼠标经过改变轮播
  $dot.on("mouseover", "li", function() {
    var $this = $(this);
    if (!$this.hasClass("hover")) {
      i = $this.index(); //设置i的值为当前li下的位置
      $banner.css("left", -WIDTH * i); //设置banner的left属性
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    }
  });

  //左按钮
  $("#btn_lf").click(function() {
    var $this = $(this);
    if (i >0) { //如果i小于当前banner数量-1
      i--;
      $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i
    } else {
      $banner.css({
        //否则先把transition属性设置为空，暂时其失去过渡效果
        "transition": "",
        //让left属性瞬间回到第0个banner的位置
        left: -WIDTH*(len-1)
      });
      i = 3; //下一个轮播为第1个banner图
      //设置定时器
      setTimeout(() => {
        $banner.css({
          //恢复transition属性
          "transition": "all .3s linear",
          //并把left属性设置到WIDTH*i的位置
          "left": -WIDTH * i
        });
      }, 50);
    }
    if (i >0) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    }
  });

  //右按钮
  $("#btn_rt").click(function() {
    var $this = $(this);
    if (i < len - 1) { //如果i小于当前banner数量-1
      i++;
      $banner.css("left", -WIDTH * i); //移动banner的left值为WIDTH*i

    } else {
      $banner.css({
        //否则先把transition属性设置为空，暂时其失去过渡效果
        "transition": "",
        //让left属性瞬间回到第0个banner的位置
        left: 0
      });
      i = 1; //下一个轮播为第1个banner图
      //设置定时器
      setTimeout(() => {
        $banner.css({
          //恢复transition属性
          "transition": "all .3s linear",
          //并把left属性设置到WIDTH*i的位置
          "left": -WIDTH * i
        });
      }, 50);
    }
    if (i < len - 1) {
      //添加第i个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + i + ")").addClass("hover").siblings().removeClass("hover");
    } else {
      //添加第0个li的class属性hover，并把同级兄弟的class清除
      $dot.children("li:eq(" + 0 + ")").addClass("hover").siblings().removeClass("hover");
    }
  });
  </script>
</body>

</html>

jquery实现无缝轮播banner

效果

html

css

javascript

完整代码

Leave a Comment Cancel reply

mac更新big sur后无法启动 Parallels Desktop，因为您的 Mac 操作系统缺少一些必需组件(附一键启动教程)

macos连接v-p-n（L2TP）无法上外网解决方法

Vue Element-UI表单按条件动态控制是否必填/必选

macos修改mac地址及自动修改脚本

宝塔linux面板5.9手动破解非第三方脚本

Js-Math对象的常用方法

CentOS7防火墙firewalld常用命令

地图相关:判断一个位置是否在多边形区域范围内

Vue组件用法和组件的通讯

Js-Function对象call、apply、bind用法区别

jquery实现无缝轮播banner

效果

html

css

javascript

完整代码