JavaScript实现无限轮播效果


Posted in Javascript onNovember 19, 2020

本文实例为大家分享了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>

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

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
JQuery select标签操作代码段
May 16 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
微信小程序实现分页加载效果
Nov 19 #Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 #Vue.js
H5 js点击按钮复制文本到粘贴板
Nov 19 #Javascript
JS数据类型分类及常用判断方法
Nov 19 #Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 #Javascript
javascript this指向相关问题及改变方法
Nov 19 #Javascript
JavaScript实现alert弹框效果
Nov 19 #Javascript
You might like
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php生成随机数的三种方法
2014/09/10 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python实现AES加密解密
2019/03/28 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
学校大课间活动方案
2014/01/30 职场文书
劳动之星获奖感言
2014/02/01 职场文书
小学家长学校培训材料
2014/08/24 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
安全承诺书
2015/01/19 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
CentOS MySql8 远程连接实战
2022/04/19 MySQL