您的位置：首页 > 其它

图片轮播，鼠标放上去即停止，鼠标移除即播放下一张图片

2017-06-12 14:37 344 查看

<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<meta charset="utf-8"/>
<style type="text/css">
ul{
list-style-type:none;/*去掉列表前面的.*/
border:2px solid #CCC;
width:480px;
height:360px;
margin:0;
padding:0;
}
li{
width:480px;
height:360px;
margin:0;
padding:0;
}
.show{
display:block;
}
.hide{
display:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
lunbo();
};
var id;
var index = 0;//轮播次数
function lunbo(){
id = setInterval(function(){
//将所有li隐藏
var ul = document.getElementById("photos");
//在元素下中子元素--获取所有li
var lis = ul.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].className = "hide";
}
//将下一个li显示
index ++;
lis[index % lis.length].className = "show";
},1000);
}
function stop(){
clearInterval(id);
}
</script>
</head>
<body>
<ul id="photos" onmouseover="stop();" onmouseout="lunbo();">
<li class="show"><img src="../images/f1.jpg"/></li>
<li class="hide"><img src="../images/f2.jpg"/></li>
<li class="hide"><img src="../images/f3.jpg"/></li>
<li class="hide"><img src="../images/f4.jpg"/></li>
</ul>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航