本文实例为大家分享了JavaScript实现简单的轮播图的具体代码，供大家参考，具体内容如下
js轮播图实现思路
1、先获取元素 盒子 左右按钮
2、鼠标经过 显示/隐藏 左右侧按钮
3、动态生成小圆圈、 添加自定义属性
4、小圆圈点击事件 添加current类名
5、添加动画事件 animate 等于 -索引号*focusWidth
6、克隆第一张图片到最后面
7、添加右侧/左侧按钮点击事件
8、设置定时器 手动调用右侧按钮点击事件
html代码部分
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< link rel = "stylesheet" href = "css/index.css" >
< script src = "js/index.js" ></ script >
</ head >
< body >
< div class = "focus" >
< a href = "javascript:;" class = "arrow_r" >></ a >
< a href = "javascript:;" class = "arrow_l" >
<</ a >
< ul >
< li >
< a href = "" >< img src = "images/focus.jpg" alt = "" ></ a >
</ li >
< li >
< a href = "" >< img src = "images/focus1.jpg" alt = "" ></ a >
</ li >
< li >
< a href = "" >< img src = "images/focus2.jpg" alt = "" ></ a >
</ li >
< li >
< a href = "" >< img src = "images/focus3.jpg" alt = "" ></ a >
</ li >
</ ul >
< ol class = "circle" >
</ ol >
</ div >
</ body >
</ html >
css样式部分
* {
padding : 0 ;
margin : 0 ;
}
li {
list-style : none ;
}
img {
border : 0 ;
vertical-align : top ;
}
a {
text-decoration : none ;
}
.focus {
position : relative ;
width : 721px ;
height : 455px ;
margin : 100px auto ;
overflow : hidden ;
}
.focus ul {
position : absolute ;
top : 0 ;
left : 0 ;
width : 600% ;
}
.focus ul li {
float : left ;
}
.arrow_r,
.arrow_l {
display : none ;
position : absolute ;
top : 50% ;
transform: translateY( -50% );
width : 40px ;
height : 40px ;
line-height : 40px ;
text-align : center ;
font-size : 24px ;
background : rgba( 0 , 0 , 0 , . 2 );
color : #fff ;
z-index : 1 ;
}
.arrow_r {
right : 0 ;
}
. circle {
position : absolute ;
bottom : 10px ;
left : 50px ;
}
. circle li {
float : left ;
width : 8px ;
height : 8px ;
border : 2px solid rgba( 255 , 255 , 255 , . 5 );
border-radius: 50% ;
margin : 0 3px ;
cursor : pointer ;
}
.current {
background-color : #fff ;
}
javascript部分
window.addEventListener( 'load' , function () {
//获取元素
var focus = document.querySelector( '.focus' );
var arrow_r = document.querySelector( '.arrow_r' );
var arrow_l = document.querySelector( '.arrow_l' );
var focusWidth = focus.offsetWidth;
// 鼠标经过focus盒子 显示/隐藏 左右侧按钮 暂停轮播
focus.addEventListener( 'mouseenter' , function () {
arrow_r.style.display = 'block' ;
arrow_l.style.display = 'block' ;
clearInterval(timer);
timer = null ;
});
focus.addEventListener( 'mouseleave' , function () {
arrow_r.style.display = 'none' ;
arrow_l.style.display = 'none' ;
timer = setInterval( function () {
//调用点击事件
arrow_r.click();
}, 2000);
});
//动态生成小圆圈
var ul = focus.querySelector( 'ul' );
var ol = focus.querySelector( '.circle' );
for ( var i = 0; i < ul.children.length; i++) {
var li = document.createElement( 'li' );
li.setAttribute( 'index' , i);
ol.appendChild(li);
//小圆圈点击事件
li.addEventListener( 'click' , function () {
for ( var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '' ;
}
var index = this .getAttribute( 'index' );
num = index;
circle = index;
this .className = 'current' ;
animate(ul, -index * focusWidth);
})
}
ol.children[0].className = 'current' ;
//克隆第一张图片放到最后一张
var fis = ul.children[0].cloneNode( true );
ul.appendChild(fis);
//右侧按钮点击事件
var num = 0;
var circle = 0;
arrow_r.addEventListener( 'click' , function () {
if (num === ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth);
circle++;
if (circle === ul.children.length - 1) {
circle = 0;
}
for ( var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '' ;
}
ol.children[circle].className = 'current' ;
});
//左侧按钮点击事件
arrow_l.addEventListener( 'click' , function () {
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px' ;
}
num--;
animate(ul, -num * focusWidth);
circle--;
circle = circle < 0 ? ol.children.length - 1 : circle;
// 调用函数
circleChange();
});
//清除其余小圆圈的current类名
function circleChange() {
for ( var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '' ;
}
// 留下当前的小圆圈的current类名
ol.children[circle].className = 'current' ;
}
//动画函数
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval( function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px' ;
}, 15);
}
//自动轮播放轮播图
var timer = setInterval( function () {
//调用点击事件
arrow_r.click();
}, 2000);
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/llt299022/article/details/114235151
查看更多关于基于JavaScript实现简单的轮播图的详细内容...