js定时器实现图片的无缝轮播

最新推荐文章于 2024-08-02 20:55:43 发布

Bright2017

最新推荐文章于 2024-08-02 20:55:43 发布

阅读量4.1k

点赞数 3

分类专栏： JavaScript 网页中用到过的效果

本文链接：https://blog.csdn.net/Bright2017/article/details/78941163

版权

网页中用到过的效果同时被 2 个专栏收录

138 篇文章 0 订阅

订阅专栏

JavaScript

50 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无缝滚动轮播图</title>
<style>
*{
margin: 0;
padding:0;
}
body{
width: 1000px;
margin: 100px auto;
background-color: #fff;
}
#wrapper{
overflow: hidden;
width: 600px;
height: 100px;
position: relative;

}
#wrapper ul {
position: absolute;
left: 0;
top: 0;
}
#wrapper li{
float: left;
list-style: none;
}
#wrapper li img{
width: 150px;
height: 100px;
border-radius: 9px;
}
input[type=button]{
margin-top: 20px;
width: 35px;
height: 25px;
line-height: 25px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var timer=null;//这里只是给个定义，不让变量是undefind就行，也可以直接赋值
var speed=4;//速度
var od=document.getElementById("wrapper");//最外部的div
var au=od.getElementsByTagName('ul')[0];
var ali=au.getElementsByTagName('li');
au.innerHTML=au.innerHTML+au.innerHTML;//这里是把ul的内容*2
au.style.width=ali[0].offsetWidth*ali.length+'px';//ul的宽度时多有的li的宽度之和
timer=setInterval(move,30);//定时器重复执行move这个函数，每0.3秒执行一次
function move(){//这个函数的作用是移动
// offsetLeft是指当前元素距离左侧的距离
// offsetWidth是指对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变
if(au.offsetLeft<-au.offsetWidth/2){
// 如果ul距离他的父元素wrapper的左侧距离小于ul这个元素整体宽度的一半,就让它的左边距归0
au.style.left='0';
}
if(au.offsetLeft>0){
// 如果左边距大于0,那么左边距就等于当前ul的总体宽度除以2
au.style.left=-au.offsetWidth/2+'px';
}
au.style.left=au.offsetLeft+speed+'px';
// ul的左边定位left等于ul的左边距+4,加这个4的原因是控制速度，不信你可以更改一下，数值越大速度越快
}
od.οnmοuseοver=function(){//鼠标进入的时候，停止定时器，让它停下来
clearInterval(timer);
}
od.οnmοuseοut=function(){//鼠标离开的时候，继续执行定时器，让它继续动
timer=setInterval(move,30);
}
document.getElementById("btn1").οnclick=function(){
//速度为-4的时候，就是让它向左边，因为我们是在更改它的定位left,所以负值是左边
speed=-4;
}
document.getElementById("btn2").οnclick=function(){
//速度为4的时候，就是让它向右边，因为我们是在更改它的定位left,所以负值是右边
speed=4;
}
}
</script>
</head>
<body>
<div id="wrapper">
<ul>
<li><img src="img/111.jpg"/></li>
<li><img src="img/222.png"/></li>
<li><img src="img/333.png"/></li>
<li><img src="img/444.jpg"/></li>
<li><img src="img/555.jpg"/></li>
</ul>
</div>
<input type="button" name="" id="btn1" value="向左" />
<input type="button" id="btn2" value="向右"/>
</body>
</html>