JS_轮播案例

最新推荐文章于 2024-09-05 11:00:53 发布

a2798003474

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量69

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Bighua123/p/7635874.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.show{
display: inline-block;
}
.hide{
display: none;
}
div{
border: 1px solid red;
width: 218px;
height: 218px;
margin: 50px auto;
}
</style>
<script type="text/javascript">
//页面加载后
window.οnlοad=function(){
lunbo();
}
//轮播
var id;
var n=0;//轮播次数
function lunbo() {
//启动定时器
id=setInterval(function() {
n++;
//获取所有图片
var imgs=document.getElementsByTagName("img");
//将所有图片隐藏
for(var i=0;i<imgs.length;i++){
imgs[i].className="hide";
}
//将下一张图片显示
var index=n%imgs.length;
imgs[index].className="show";
}, 2000);
}
function stop() {
clearInterval(id);
}
</script>
</head>
<body>

<div οnmοusemοve="stop();"
οnmοuseοut="lunbo();">
<img src="../images/01.jpg" >
<img src="../images/02.jpg" class="hide">
<img src="../images/03.jpg" class="hide">
<img src="../images/04.jpg" class="hide">
<img src="../images/05.jpg" class="hide">
<img src="../images/06.jpg" class="hide">
</div>
</body>
</html>

转载于:https://www.cnblogs.com/Bighua123/p/7635874.html

a2798003474

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS_轮播案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">.show{ display: inline-block;}.hide{ displa...
复制链接

扫一扫