JavaScript实现无限轮播效果

 更新时间:2020-11-19 17:00:34   作者:佚名   我要评论(0)

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

原理

图片说明原理
轮播顺序:1–>2–>3–>4–>5–>1的副本–>2

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

效果展示

原理

图片说明原理

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

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

资源下载

代码

<!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实现无限轮播无倒退效果
  • 无限循环轮播图之运动框架(原生JS实现)
  • 原生js实现无限循环轮播图效果
  • js 图片轮播(5张图片)
  • js图片自动轮播代码分享(js图片轮播)
  • 最简单的JavaScript图片轮播代码(两种方法)
  • 原生js和jquery实现图片轮播特效
  • JS实现简易图片轮播效果的方法
  • js图片轮播效果实现代码
  • js实现轮播图的完整代码

相关文章

  • JavaScript实现无限轮播效果

    JavaScript实现无限轮播效果

    本文实例为大家分享了JavaScript实现无限轮播效果的具体代码,供大家参考,具体内容如下 效果展示 原理 图片说明原理 轮播顺序:1–>2–>3–>4–>5–>1的副本–>2
    2020-11-19
  • php操作redis命令及代码实例大全

    php操作redis命令及代码实例大全

    官方PHP Redis扩展文件下载 https://pecl.php.net/package/redis 选择与你PHP版本相应的文件下载后直接放到PHP目录下的ext文件夹里,然后修改php.ini配置文件如下
    2020-11-19
  • 如何用SpringBoot 进行测试

    如何用SpringBoot 进行测试

    普通测试 假设要测试一个工具类 StringUtil(com.rxliuli.example.springboottest.util.StringUtil) /** * 用于测试的字符串工具类 * * @author rxliuli
    2020-11-19
  • Java彻底消灭if-else的8种方案

    Java彻底消灭if-else的8种方案

    优化方案 1:提前 return,去除不必要的 else 如果 if-else 代码块包含 return 语句,可以考虑通过提前 return,把多余 else 干掉,使代码更加优雅。 优化前: if
    2020-11-19
  • 微信小程序实现分页加载效果

    微信小程序实现分页加载效果

    分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用
    2020-11-19
  • Java如何利用状态模式(state pattern)替代if else

    Java如何利用状态模式(state pattern)替代if else

    大多数开发人员现在还在使用if else的过程结构,曾看过jdon的banq大哥写的一篇文章,利用command,aop模式替代if else过程结构。当时还不太明白,这几天看了《重构》
    2020-11-19
  • JavaScript构造函数原理及实现流程解析

    JavaScript构造函数原理及实现流程解析

    在学习构造函数之前我们需要知道我们学习构造函数需要学习什么: 1.什么是构造函数 2.构造函数用来做什么 3.构造函数的执行过程 4.构造函数的返回值 1.所以首先我们
    2020-11-19
  • Docker重命名镜像名称和TAG操作

    Docker重命名镜像名称和TAG操作

    使用docker images时,可能会出现REPOSITORY和TAG均为none的镜像,如下图 这时,我们可以重命名镜像 # docker tag IMAGEID(镜像id) REPOSITORY:TAG(仓库:标签)
    2020-11-19
  • C# 设置防火墙的创建规则

    C# 设置防火墙的创建规则

      对于某些程序,我们只允许它使用某些特定端口、网络类型或者特定IP类型等信息。这时候,需要使用到防火墙里面的“高级设置”,创建某些特定的入站或者出栈规则,
    2020-11-19
  • JS数据类型分类及常用判断方法

    JS数据类型分类及常用判断方法

    数据类型判断的方法 在探索数据类型判断方法的时候我们需要知道JS中有哪些数据类型: 我们可以把JS中数据类型分为两类: 1.基本数据类型:Undefined、Null、B
    2020-11-19

最新评论