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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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
基于mysql的论坛(1)
2006/10/09 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
Python入门篇之文件
2014/10/20 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python读取实时数据流示例
2019/12/02 Python
python装饰器使用实例详解
2019/12/14 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python中spy++的使用超详细教程
2021/01/29 Python
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
公司合作协议书范本
2014/04/18 职场文书
城市创卫标语
2014/06/17 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
幼儿园开学报名通知
2015/07/16 职场文书