js实现自动图片轮播代码
2017-04-15 16:50:26
JavaScript
这篇文章主要为大家详细介绍了js实现自动轮播的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了轮播的具体代码，自动轮播，居中显示，供大家参考，具体内容如下
上面就是这篇文章的全部内容，希望对大家的学习和工作有所帮助
本文实例为大家分享了轮播的具体代码，自动轮播，居中显示，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 192px;
height: 120px;
border: 1px solid gray;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#div1 img{
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<img src="images/1.jpg" alt="" width="192"/>
<img src="images/2.jpg" alt="" width="192"/>
<img src="images/3.jpg" alt="" width="192"/>
<img src="images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">
</div>
<script>
//获取页面元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var imgs = div1.getElementsByTagName('img');
//初始化页面图片的位置
window.onload=function(){
for(var i=0; i<imgs.length; i++){
imgs[i].style.left = i*192 +'px'
}
};
//轮播移动的函数
function imgMove(){
var b1 = false;
for(var i = 0; i < imgs.length; i++) {
imgs[i].style.left = imgs[i].offsetLeft-1 + 'px';
if(imgs[i].offsetLeft==0){
b1=true;
if(i==0)
imgs[imgs.length-1].style='576px';
else
imgs[i-1].style.left='576px'
}
}
if(!b1)
setTimeout(imgMove,20);
else
setTimeout(imgMove,2000);
}
setTimeout(imgMove,3000);
</script>
</body>
</html>
|
上面就是这篇文章的全部内容，希望对大家的学习和工作有所帮助
