这是轮播图显示的效果图,点击下面的按钮会显示相应的图片,下面代码会只贴出来js部分,css样式看个人发挥去写。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/86b7bbb23fffb550b98cb95d4e7dc338.png)
关于轮播图,重要的是在临界值的思考上。再js中我放了4张图片,最后一张和第一张一样。当走完图片,此时应该判断是否切换成第二张,因为第一张在最后一张显示过了。并且同时设ul的偏移量归0,否则切换成第二张会有拉回开的感觉,有违和感。具体见代码。
关于下面小圆点有两点:1:先清除所有再添加的思想。2:当显示第4张时设置小圆点为1,同第一张一样。下面时小圆点的部分设置代码,防止只看js看不懂。
#num li.hover {
background-color: red;
}
<ul id="num">
<li class="hover">1</li>
<li>2</li>
<li>3</li>
</ul>
以下为轮播图的js代码
<script>
var odiv = document.querySelector('div');
var oul = document.querySelector('#list');
var ali = document.querySelectorAll('#list li');
var wid = odiv.offsetWidth;
oul.style.width = ali.length * wid + 'px'
var i = 0
function move() {
i++
if (i == ali.length) {
i = 1;
oul.style.left = 0;
}
for (let j = 0; j < numli.length; j++) {
numli[j].className = '';
}
if (i == ali.length - 1) {
numli[0].className = 'hover';
} else {
numli[i].className = 'hover';
}
startMove(oul, {
left: -i * wid,
})
}
var timer = setInterval(() => {
move();
}, 3000);
odiv.onmouseover = function () {
clearInterval(timer)
};
odiv.onmouseout = function () {
timer = setInterval(() => {
move();
}, 3000);
}
var numli = document.querySelectorAll('#num li');
for (let j = 0; j < numli.length; j++) {
numli[j].onmousemove = function () {
i = j - 1;
move()
}
}
</script>