您的位置：首页 > Web前端 > JavaScript

js的轮播效果

2015-09-11 22:21 621 查看

图片的轮播效果！主要运用了元素的style样式属性，与 setInterval();

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 960px;
height: 400px;
outline: 1px black solid;
margin: 50px auto;
overflow: hidden;

}
ul{
width: 28800px;
height: 400px;
outline: 1px red solid;

}
li{
width: 960px;
height: 400px;
list-style: none;
float: left;
}
button{
margin-left: 700px;;

}
</style>
<script>
window.onload=function(){
var bnt=document.getElementsByTagName('button')[0];
var lis=document.getElementsByTagName('li');
var ul=document.getElementsByTagName('ul')[0];
for(var i=0;i<lis.length;i++){
lis[i].style.marginLeft=0;
}
var timeer=setInterval(function(){
var timme=setInterval(function(){
var ml=parseInt(lis[0].style.marginLeft);//利用marginLeft的值让图片移动
ml=ml-30;//图片每一次移动30px；
lis[0].style.marginLeft=ml+'px';
if(ml<=-960){
clearInterval(timme);//当第一张图片移动了960px时，就将时间清理了，让他停止5秒。
var newli=lis[0].cloneNode(true);//这时克隆一个li标签和他的节点
ul.removeChild(lis[0]);//将ul的子节点删除
newli.style.marginLeft = 0;
ul.appendChild(newli);//将克隆的添加到ul里
}
},50);
},4000);
bnt.onclick=function(){
window.clearInterval(timeer);
}
};
</script>
</head>
<body>
<div>
<ul>
<li><img src="../images/slide-1.jpg"/></li>//随便找三张width：960px;height:400px;的图片
<li><img src="../images/slide-2.jpg"/></li>
<li><img src="../images/slide-3.jpg"/></li>
</ul>
</div>
<button>停止播放</button>
</body>
</html>

作业：用js做个手风琴效果！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航