关于轮播图的练习和遇到的问题

来源：互联网发布：正交矩阵的性质编辑：程序博客网时间：2024/05/23 01:59

这是关于轮播自己写的一个小练习，先说说思路z。

1.先用html+css将基本的框架构建出来，然后圆点和图片绑定，绑定的方式使用data-x属性来控制图片位移的距离

2.用定时器将图片轮播，在这需要主要的是最后一个圆点返回第一个圆点时的情况。

遇到的困难：鼠标放上去的时候定时器停止，移开的时候轮播开始。

分析：首先，当网页打开的时候轮播是开始的，所以需要执行一次bb（），然后鼠标放上去的时候清除定时器

clearInterval(t); 鼠标离开的时候再次运行一边bb（）。

轮播的使用还是不够熟练，有写的不好的地方希望各位前辈能指点一下，谢谢。

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.lb{
position: relative;
width: 670px;
height: 280px;
margin-left: 25%;
overflow: hidden;
}
div.img1{
position: absolute;
width: 2680px;
height: 280px;
border: 1px solid black;
left: 0;
top: 0;
transition: all 2s;
}
div.img1 img{
float: left;
}
.yd{
position: absolute;
bottom: 10px;
right: 20px;
}
.yd a{
display: inline-block;
width: 20px;
height: 20px;
background-color: orange;
text-decoration: none;
text-align: center;
line-height: 20px;
color: black;
border-radius: 10px;
}
#sel{
background-color: red;
}
</style>
</head>
<body>
<div class="lb">
<div class="img1">
<img src="a1.jpg" alt="">
<img src="a2.jpg" alt="">
<img src="a3.jpg" alt="">
<img src="a4.jpg" alt="">
</div>


<div class="yd">
<a href="#" data-x="0" id="sel">1</a>
<a href="#" data-x="-670">2</a>
<a href="#" data-x="-1340">3</a>
<a href="#" data-x="-2010">4</a>
</div>
</div>

<script>
var a=document.querySelectorAll("div.yd a");
var img1=document.querySelector("div.img1")

for(var i=0;i<a.length;i++){
a[i].onmouseover=function(){
var sel=document.querySelector("#sel");
sel.id="";
this.id="sel";
this.parentNode.previousElementSibling.style.left = this.getAttribute("data-x")+"px"

clearInterval(t);



}
a[i].onmouseout=function(){
bb()

}
}
img1.onmouseover=function(){
clearInterval(t);
}
img1.onmouseout=function(){
bb()

}

bb()

// 定时器部分
function bb(){
t=setInterval(function(){
var sel=document.querySelector("#sel");
if(sel.nextElementSibling!=null){
sel.id="";
sel.nextElementSibling.id="sel";
sel.parentNode.previousElementSibling.style.left = sel.nextElementSibling.getAttribute("data-x")+"px"

}else{
sel.id="";
a[0].id="sel";
sel.parentNode.previousElementSibling.style.left = a[0].getAttribute("data-x")+"px"
}

},3000)
}

</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.lb{
position: relative;
width: 670px;
height: 280px;
margin-left: 25%;
overflow: hidden;
}
div.img1{
position: absolute;
width: 2680px;
height: 280px;
border: 1px solid black;
left: 0;
top: 0;
transition: all 2s;
}
div.img1 img{
float: left;
}
.yd{
position: absolute;
bottom: 10px;
right: 20px;
}
.yd a{
display: inline-block;
width: 20px;
height: 20px;
background-color: orange;
text-decoration: none;
text-align: center;
line-height: 20px;
color: black;
border-radius: 10px;
}
#sel{
background-color: red;
}
</style>
</head>
<body>
<div class="lb">
<div class="img1">
<img src="a1.jpg" alt="">
<img src="a2.jpg" alt="">
<img src="a3.jpg" alt="">
<img src="a4.jpg" alt="">
</div>


<div class="yd">
<a href="#" data-x="0" id="sel">1</a>
<a href="#" data-x="-670">2</a>
<a href="#" data-x="-1340">3</a>
<a href="#" data-x="-2010">4</a>
</div>
</div>

<script>
var a=document.querySelectorAll("div.yd a");
var img1=document.querySelector("div.img1")

for(var i=0;i<a.length;i++){
a[i].onmouseover=function(){
var sel=document.querySelector("#sel");
sel.id="";
this.id="sel";
this.parentNode.previousElementSibling.style.left = this.getAttribute("data-x")+"px"

clearInterval(t);



}
a[i].onmouseout=function(){
bb()

}
}
img1.onmouseover=function(){
clearInterval(t);
}
img1.onmouseout=function(){
bb()

}

bb()

// 定时器部分
function bb(){
t=setInterval(function(){
var sel=document.querySelector("#sel");
if(sel.nextElementSibling!=null){
sel.id="";
sel.nextElementSibling.id="sel";
sel.parentNode.previousElementSibling.style.left = sel.nextElementSibling.getAttribute("data-x")+"px"

}else{
sel.id="";
a[0].id="sel";
sel.parentNode.previousElementSibling.style.left = a[0].getAttribute("data-x")+"px"
}

},3000)
}

</script>
</body>
</html>

0 0