想练习更多前端案例,请进个人主页,点击前端实战案例->传送门
觉得不错的记得点个赞?支持一下我0.0!谢谢了!
不积跬步无以至千里,不积小流无以成江海。
效果如下:
代码及注释如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无缝轮播</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.slide{
height: 280px;
width: 520px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
}
.slide-imgs{
width: 3120px;
height: 100%;
}
.slide-imgs img{
float: left;
}
.slide-dots{
width: 90px;
height: 10px;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-around;
align-items: center;
}
.slide-dots li label{
display: inline-block;
width: 10px;
height: 10px;
background-color: #FFFFFF;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="slide">
<div class="slide-imgs">
<img src="./imgs/slider01.jpg" alt="">
<img src="./imgs/slider02.jpg" alt="">
<img src="./imgs/slider03.jpg" alt="">
<img src="./imgs/slider04.jpg" alt="">
<img src="./imgs/slider05.jpg" alt="">
<img src="./imgs/slider01.jpg" alt="">
</div>
<ul class="slide-dots">
<li><label></label></li>
<li><label></label></li>
<li><label></label></li>
<li><label></label></li>
<li><label></label></li>
</ul>
</div>
</body>
<script>
window.onload = function(){
var left = 0; //这个为每次平移的像素值
var timer; //定义settimeout的返回值
var slide_img = document.getElementsByClassName('slide-imgs')[0];
var img = slide_img.getElementsByTagName('img');
var slide_label = document.getElementsByClassName('slide-dots')[0].getElementsByTagName('label');
run();
function run(){
// 小圆点背景色随图片切换而改变
var img_index = Math.floor(-left/520);
change_dot(img_index);
// 如果刚好是整张图片,则暂停一秒
var n = (left%520 == 0)?1000:10
timer = setTimeout(run, n);
slide_img.style.marginLeft = left+"px";
left -= 10;
// 当位置小于等于2600时,将其位置初始化到第一张图片
if(left <= -2600){
slide_img.style.marginLeft = "0px";
left = 0;
}
}
function change_dot(m){
for(let i=0;i<slide_label.length;i++){
slide_label[i].style.backgroundColor = "#FFFFFF";
}
// 当鼠标移入事件发生时,有一定的几率m会等于5
//(因为有6张图片,所以在第5张切换到第6张的一瞬间有鼠标移入事件则会出错),
// 而slide_label索引为0到4,所以会报错
// 这里加一个判断,防止因报错程序停止运行
if(m<5){
slide_label[m].style.backgroundColor = "orangered";
}
}
// 绑定鼠标移出移入轮播图图片事件
for(let i=0;i<img.length;i++){
(function(i){
img[i].onmousemove = function(){
clearTimeout(timer);
left = -i*520;
slide_img.style.marginLeft = left + "px";
}
img[i].onmouseleave = function(){
run();
}
})(i);
}
// 绑定鼠标移出移入轮播图小圆点事件,原理同上
for(let i=0;i<slide_label.length;i++){
(function(i){
slide_label[i].onmousemove = function(){
clearTimeout(timer);
left = -i*520;
slide_img.style.marginLeft = left + "px";
change_dot(i);
}
slide_label[i].onmouseleave = function(){
run();
}
})(i);
}
}
</script>
</html>