JavaScript实现无限轮播效果
更新时间：2020年11月19日 15:25:55 作者：御剑把酒听秋雨丶
这篇文章主要介为大家详细绍了JavaScript实现无限轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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实现获取当前时间是本月第几周的方法,涉及javascript针对日期及时间的相关操作技巧,非常简单实用,需要的朋友可以参考下2015-08-08
下面小编就为大家带来一篇点击页面任何位置隐藏div的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了javascript封装简单实现方法,涉及javascript中方法与属性的相关设置与使用技巧,非常简单实用,需要的朋友可以参考下2015-08-08
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
[红色]静态页面下用javascript操作ACCESS数据库(读增改删)的代码...2007-05-05
这篇文章主要为大家详细介绍了微信小程序弹窗组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序存储数据，而是在每一个节点里存到下一个节点的指针(Pointer) 。下面我们用 JavaScript 代码对链表的数据结构进行实现2017-08-08
这篇文章主要介绍了微信小程序 轮播图实现原理及优化详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
本文主要介绍了浅谈async、defer以普通script加载的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了js轻松实现弹框显示选项效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要为大家详细介绍了JS实现倒计时图文效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最新评论