欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现无限轮播效果

程序员文章站 2022-03-10 23:13:20
本文实例为大家分享了javascript实现无限轮播效果的具体代码,供大家参考,具体内容如下效果展示原理图片说明原理轮播顺序:1–>2–>3–>4–>5–>1的副本–&g...

本文实例为大家分享了javascript实现无限轮播效果的具体代码,供大家参考,具体内容如下

效果展示

JavaScript实现无限轮播效果

原理

JavaScript实现无限轮播效果

图片说明原理

轮播顺序:1–>2–>3–>4–>5–>1的副本–>2–>3–>4–>5–>1的副本–>2…一直循环

JavaScript实现无限轮播效果

鼠标进入图片时自动轮播暂停,离开后恢复

资源下载

代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>无限轮播</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    img {
      vertical-align: top;
    }
    #slider {
      width: 520px;
      height: 280px;
      border: 1px solid #000;
      padding: 10px;
      margin: 100px auto;
      position: relative;

    }
    #top {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    #top ul {
      width: 3120px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    #top ul li {
      width: 520px;
      height: 280px;
      float: left;
    }
    #slider ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    #slider ol li {
      width: 20px;
      height: 20px;
      background-color: darkgrey;
      display: inline-block;
      border-radius: 50%;
      margin-right: 3px;
      cursor: pointer;
    }
    #slider ol li.current {
      background-color: orangered;
    }
  </style>
</head>
<body>
  <div id="slider">
    <div id="top">
      <ul id="ul">
        <li><img src="images/pic01.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic03.jpg" alt=""></li>
        <li><img src="images/pic04.jpg" alt=""></li>
        <li><img src="images/pic05.jpg" alt=""></li>
      </ul>
    </div>
    <ol id="ol">
    </ol>
  </div>
<script src="js/myfunc.js"></script>
<script>
  window.onload = function () {
    // 1.获取需要的标签
    var lis = $("ul").children;

    // 6.自动轮播参数定义(图片索引,圆点索引)
    var currentindex = 0, indicatorindex = 0;

    // 2.克隆li标签(将第一个li标签克隆一份到最后一个li标签后面)
    $("ul").appendchild(lis[0].clonenode(true));

    // 3.动态创建右下角的圆点
    for(var i=0; i<lis.length-1; i++){ // 因为克隆了一个li,所以需要减1
      var li = document.createelement("li");
      $("ol").appendchild(li);
    }

    // 4.第一个圆点选中
    $("ol").children[0].classname = "current";

    // 5.监听鼠标进入圆点
    var ollis = $("ol").children;
    for(var j=0; j<ollis.length; j++){
      (function (j) { // 闭包
        // 5.1 获取单独的li标签
        var li = ollis[j];

        // 5.2 鼠标进入
        li.onmouseover = function () {
          for(var i=0; i<ollis.length; i++){ // 排他思想
            ollis[i].classname = "";
          }

          this.classname = "current";

          // 5.3 轮播图动起来
          constant($("ul"), -(520 * j), 60);

          // 6.1
          currentindex = indicatorindex = j;
        }
      })(j)
    }

    // 7.自动轮播
    var timer = setinterval(autoplay, 1000);

    // 8.清除和设置定时器
    $("slider").onmouseover = function () {
      clearinterval(timer);
    };

    $("slider").onmouseout = function () {
      timer = setinterval(autoplay, 1000);
    };

    /**
     * 自动轮播函数
     */
    function autoplay() {
      // 7.1 ul 滚动起来
      currentindex++;
      if(currentindex > lis.length-1){
        $("ul").style.left = 0;
        currentindex = 1;
      }
      constant($("ul"), -currentindex * 520, 60);

      // 7.2 圆点滚动起来
      indicatorindex++;
      if(indicatorindex > ollis.length-1){
        indicatorindex = 0;
      }
      for(var i=0; i<ollis.length; i++){ // 排他思想
        ollis[i].classname = "";
      }

      ollis[indicatorindex].classname = "current";
    }
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: js 无限轮播