通过更改class实现
html部分
首先我们要给HTML的里标签添加一个class='current' 通过class变更来实现轮播的效果 小圆点同理
<div id="imglist" class="imglist">
<ul >
<li class='current'><img src="图片路径" alt=""></li>
<li><img class='img2' src="图片路径" alt=""></li>
</ul>
</div>
<div class="dian" id='circle'>
<ul>
<li class='circle'></li>
<li></li>
</ul>
</div>
js部分
// 获取元素
window.onload=function() {
//首先我们需要先获取元素
var imglist = document.getElementById('imglist').getElementsByTagName('li');
var circlelis = document.getElementById('circle').getElementsByTagName('li')
// 设置定时器
var idx = 0;
//定时器
var timer = null;
function fn1() {
idx++;
changePic()
}
timer = setInterval(fn1, 4000);
//圆圈的批量监听
for (var i = 0; i < circlelis.length; i++) {
//绑定自定义属性
circlelis[i].idxx = i;
circlelis[i].onmouseover = function () {
//鼠标接触圆圈,更改idx值;
idx = this.idxx;
远点切换的同时图片也切换
changePic()
}
}
function changePic() {
//更改图片
if (idx > imglist.length - 1) idx = 0;
if (idx < 0) idx = imglist.length - 1;
for (var i = 0; i < imglist.length; i++) {
imglist[i].className = '';
}
imglist[idx].className = 'current';
//更改圆点
for (var i = 0; i < circlelis.length; i++) {
circlelis[i].className = '';
}
circlelis[idx].className = 'circle';
}
}
css部分
我们还需要同过css样式来实现两张图片定位到相同的位置 以及一些样式的调试
#imglist li{
position:absolute;
left:0;
top:0;
display: none;
}
#imglist li .img2{
width:105%;
}
#imglist li img{
height:800px;
}
#imglist .current {
display: block;
}
.dian {
width: 50px;
position: absolute;
left: 50%;
margin-left: -18px;
top: 750px;
}
.dian ul{
width:200px;
}
.dian ul li {
display: inline-block;
width: 6px;
height: 6px;
border: 2px solid #fff;
border-radius: 50%;
margin:0 3px;
float:left;
}
.dian ul .dian {
background: white;
}
.dian ul li:hover {
background: white;
}