无缝轮播图

最新推荐文章于 2024-04-08 16:26:29 发布

沫熙瑾年

最新推荐文章于 2024-04-08 16:26:29 发布

阅读量135

点赞数

文章标签：无缝轮播图如何实现无缝轮播无缝轮播的原理无缝轮播图该怎么写 js中的无缝轮播图怎么写

本文链接：https://blog.csdn.net/xy19950125/article/details/80556004

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;padding:0;
}
li{
list-style: none;
}
#box{
width:700px;height:350px;position: relative;
margin:200px auto 0;overflow: hidden;
}
#oul{
height:350px;position: absolute;
}
#oul li{
width:700px;height:350px;float: left;
}
img{
width:700px;height:350px;
}
#left{
width:50px;height:50px;background:#ececec;
position: absolute;left: 30px;top:50%;
margin-top:-25px;opacity: .5;font-size:40px;
text-align: center;cursor: pointer;
}
#right{
width:50px;height:50px;background:#ececec;
position: absolute;right: 30px;top:50%;
margin-top:-25px;opacity: .5;font-size:40px;
text-align: center;cursor: pointer;
}
#small{
position: absolute;right:30px;
bottom:30px;
}
#small li{
width:30px;height:30px;border-radius: 50%;
float: left;text-align: center;
line-height: 30px;background:#ECECEC;
margin:3px
}
#small li:hover,#small li.hover{
background:red;
}
</style>
<script type="text/javascript" src="startMove.js">

</script>
</head>
<body>
<div id="box">
<ul id="oul">
<li><img src="img/01.jpg"/></li>
<li><img src="img/02.jpg"/></li>
<li><img src="img/03.jpg"/></li>
<li><img src="img/04.jpg"/></li>
<li><img src="img/05.jpg"/></li>
<li><img src="img/01.jpg"/></li>
</ul>
<div id="left">&lt</div>
<div id="right">&gt</div>
<ul id="small">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>

<script type="text/javascript">
var obox=document.getElementById("box");
var oul=document.getElementById("oul");
var ali=oul.children;
var len=ali.length;
console.log(len)
var owidth=ali[0].offsetWidth;
oul.style.width=owidth*len+"px";
var small=document.getElementById("small");
var oli=small.children;
var oleng=oli.length;

var oleft=document.getElementById("left")
var oright=document.getElementById("right")

var i=0;
var timer=setInterval(function(){
move();
},2000)
function move(){
i++;
if(i==len){
oul.style.left=0;
i=1;
}
if(i==-1){
oul.style.left=-owidth*(len-1)+"px"
i=len-2;
}
for(var j=0;j<oleng;j++){
oli[j].className="";
}
if(i==len-1){
oli[0].className="hover";
}else{
oli[i].className="hover"
}

startMove(oul,{left:-owidth*i})
}

for(let k=0;k<oleng;k++){
oli[k].οnmοuseοver=function(){
i=k-1;
move()
}
}

oright.οnclick=function(){
move();

}

oleft.οnclick=function(){
i=i-2;
move()
}

obox.οnmοuseοver=function(){
clearInterval(timer)
}
obox.οnmοuseοut=function(){
timer=setInterval(function(){
move()
},2000)
}
</script>
</div>
</body>
</html>