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 相关文章推荐
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
tsconfig.json配置详解
May 17 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
python使用tkinter实现简单计算器
2018/01/30 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python构建基础的爬虫教学
2018/12/23 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
双方协议书
2014/04/22 职场文书
保安公司服务承诺书
2014/05/28 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
关于五一放假的通知
2015/08/18 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
JS实现数组去重的11种方法总结
2022/04/04 Javascript
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
CentOS安装Nginx并部署vue
2022/04/12 Servers
Android自定义双向滑动控件
2022/04/19 Java/Android