原生js实现轮播图效果(无缝滚动) ，供大家参考，具体内容如下
效果图：
代码：
<!DOCTYPE html>
< html lang = "en" >
<!-- day07 7-10-14 -->
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< script src = "./images1/20.animate.js" ></ script >
< style >
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.focus {
/*overflow: hidden;*/
position: absolute;
top: 100px;
left: 200px;
width: 721px;
height: 455px;
background-color: brown;
}
.prev,
.next {
display: none;
position: absolute;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
text-decoration: none;
color: #fff;
line-height: 30px;
text-align: center;
font-size: 16px;
z-index: 2;
}
.focus ul {
/* 引入动画js文件要求必须有定位 */
position: absolute;
width: 600%;
}
.focus ul li {
float: left;
}
.prev {
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
right: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 10px;
left: 60px;
width: 200px;
height: 18px;
border-radius: 9px;
}
.promo-nav li {
float: left;
width: 10px;
height: 10px;
background-color: #fff;
margin: 2px;
border-radius: 50%;
}
.promo-nav .current {
background-color: orange;
}
.focus ul li a img {
width: 721px;
height: 455px;
}
</ style >
</ head >
< body >
< div class = "focus" >
< ul >
< li >
< a href = "#" >< img src = "images1/focu01.jpg" alt = "" ></ a >
</ li >
< li >
< a href = "#" >< img src = "images1/focu02.jpg" alt = "" ></ a >
</ li >
< li >
< a href = "#" >< img src = "images1/focu03.jpg" alt = "" ></ a >
</ li >
< li >
< a href = "#" >< img src = "images1/focu04.jpg" alt = "" ></ a >
</ li >
</ ul >
<!-- 左侧按钮 -->
< a href = "javascript:;" class = "prev" ><</ a >
<!-- 右侧按钮 -->
< a href = "javascript:;" class = "next" >></ a >
< ol class = "promo-nav" >
</ ol >
</ div >
< script >
window.addEventListener('load', function() {
var focus = document.querySelector('.focus');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var focusWidth = focus.offsetWidth;
//鼠标经过
focus.addEventListener('mouseenter', function() {
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
timer = null; //清除定时器变量
})
//鼠标离开
focus.addEventListener('mouseleave', function() {
prev.style.display = 'none';
next.style.display = 'none';
timer = setInterval(function() {
next.click();
}, 2000)
})
//3.动态生成小圆圈 有几张图片 就生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.promo-nav');
// console.log(ul.children.length); 4
for (var i = 0; i < ul.children.length ; i++) {
//创建一个li
var li = document .createElement('li');
//记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
//插入到ol后面
ol.appendChild(li);
//4.鼠标点击小圆圈小圆圈变色(给小圆圈添加current类其余小圆圈移除这个类)(排他思想)
//在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click', function() {
for (var i = 0 ; i < ol.children.length; i++) {
ol.children[i] .className = '' ;
}
this.className = 'current' ;
//5.点击小圆点 移动图片 移动的是ul
//ul移动的距离 小圆圈的索引号乘以图片宽度 注意是负值
//当我们点击了某个小li就得到了当前小li的索引号
var index = this .getAttribute('index');
//当我们点击了某个li就把li的索引号给num
num = index ;
//当我们点击了某个li就把li的索引号给index
circle = index ;
console.log(index);
animate(ul, -index * focusWidth, );
})
}
//把ol里面的第一个li北京颜色设置成白色
ol.children[0] .className = 'current' ;
//6. 克隆第一张li放到ul后面
var first = ul .children[0].cloneNode(true);
ul.appendChild(first);
//7.点击右侧按钮图片滚动一张
var num = 0 ;
var circle = 0 ;
var flag = true ;
//右侧按钮
next.addEventListener('click', function() {
if (flag) {
flag = false ; //先关闭节流阀
//5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动)
if (num == ul.children.length - 1) {
ul.style.left = 0 ;
num = 0 ;
}
num++;
animate(ul, -num * focusWidth, function() {
flag = true ;
});
//8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化
circle++;
//如果 circle等于4说明做到最后克隆的这张图片了 我们就复原
if (circle == ol.children.length) {
circle = 0 ;
}
// //清除其余小圆圈类名
// for (var i = 0 ; i < ol.children.length; i++) {
// ol.children[i] .className = '' ;
// }
// //留下当前小圆圈current类名
// ol.children[circle] .className = 'current' ;
circleChange();
}
})
//左侧按钮
prev.addEventListener('click', function() {
if (flag) {
flag = false ;
//5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动)
if (num == 0) {
num = ul .children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function() {
flag = true ;
});
//8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化
circle--;
//如果 circle小于0小圆圈要改为第四个小圆圈
if (circle < 0) {
circle = ol .children.length - 1;
}
// 清除其余小圆圈类名
// for (var i = 0 ; i < ol.children.length; i++) {
// ol.children[i] .className = '' ;
// }
// 留下当前小圆圈current类名
// ol.children[circle] .className = 'current' ;
circleChange();
}
})
function circleChange() {
//清除其余小圆圈类名
for (var i = 0 ; i < ol.children.length; i++) {
ol.children[i] .className = '' ;
}
//留下当前小圆圈current类名
ol.children[circle] .className = 'current' ;
}
//10.自动播放轮播图
var timer = setInterval (function() {
next.click();
}, 2000)
})
</script>
</ body >
</ html >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/are_gh/article/details/112001919