【JS】求一个控制图片自动播放的JS模块 10
网页背景有两张图或者多张图，当用户打开网页时背景图片自动开始循环播放，希望有做过的朋友给个模块...
网页背景有两张图或者多张图，当用户打开网页时背景图片自动开始循环播放，希望有做过的朋友给个模块
展开
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
.show{
display:inline-block;
}
.hide{
display:none;
}
div{
border:1px solid red;
width:218px;
height:218px;
}
</style>
</head>
<body>
<!--
onmouseover: 鼠标悬停事件
onmouseout: 鼠标离开事件
-->
<div onmouseover = "pause1();" onmouseout = "lunbo();">
<img src = "../images/01.jpg" class = "show"/>
<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>
<script>
//轮播
var id = null;
//轮播次数
var index = 0;
function lunbo(){
id = setInterval(function(){
index++;
//获取所有的图片(数组)
var imgs = document.getElementsByTagName("img");
//将它们都隐藏
for(var i=0;i<imgs.length;i++){
imgs[i].className = "hide"
}
console.log(imgs.length);
//将下一张图片显示
var next = index%imgs.length;
imgs[next].className = "show";
},1000)
}
//暂停轮播
function pause1(){
clearInterval(id);
}
//页面加载后，自动调用轮播
lunbo();
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
.show{
display:inline-block;
}
.hide{
display:none;
}
div{
border:1px solid red;
width:218px;
height:218px;
}
</style>
</head>
<body>
<!--
onmouseover: 鼠标悬停事件
onmouseout: 鼠标离开事件
-->
<div onmouseover = "pause1();" onmouseout = "lunbo();">
<img src = "../images/01.jpg" class = "show"/>
<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>
<script>
//轮播
var id = null;
//轮播次数
var index = 0;
function lunbo(){
id = setInterval(function(){
index++;
//获取所有的图片(数组)
var imgs = document.getElementsByTagName("img");
//将它们都隐藏
for(var i=0;i<imgs.length;i++){
imgs[i].className = "hide"
}
console.log(imgs.length);
//将下一张图片显示
var next = index%imgs.length;
imgs[next].className = "show";
},1000)
}
//暂停轮播
function pause1(){
clearInterval(id);
}
//页面加载后，自动调用轮播
lunbo();
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
http://www.jb51.net/article/33087.htm这个里面有15个图片轮播器插件，随便选个开源的用就是了（Slides 就挺好用的）
追问
点开查看，没有找到合适的。。。
追答
那么多都没合适的啊，你不要光看demo效果啊，可以做很多变通的都
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我有写过一个，你可以照着修改，自己想要的效果还是自己实现比较好，我也只能给出通用的解决办法，参考修改就能变成你想要的了
图片我直接用纯色代替了
<html><head> <style> div{ cursor: pointer; font-size:10pt; } .pb{ width:300px;/*单个图片的宽（和显示区域相同）*/ height:300px;/*单个图片的高（和显示区域相同）*/ } #plist{ position:relative; top:-29px; } #pshow{ width:300px;/*显示区域的宽度*/ height:300px;/*显示区域的高度*/ overflow: hidden; position:absolute; top:20px; left:20px; }</style><script src="jquery-1.9.1.js" type="text/javascript"></script><script> var i=1; function pchange(obj){ var imgtop=((0-(obj-1))*300-29)+"px"; $("#plist").animate({ top:imgtop},"slow"); i=obj++; if(i>4){ i=1; } } function timechange(){ pchange(i); i++; if(i>4){ i=1; } setTimeout('timechange()',3000); }</script></head> <body onload="timechange()"><div id="pshow"> <div style="display:table;position:relative;left:150px;top:260px;z-index:99;"> <div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(1)">1</div> <div style="display:table-cell;width:10px;height:20px;"></div> <div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(2)">2</div> <div style="display:table-cell;width:10px;height:20px;"></div> <div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(3)">3</div> <div style="display:table-cell;width:10px;height:20px;"></div> <div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(4)">4</div> </div> <div id="plist"> <div class="pb" style="background:green;"> </div> <div class="pb" style="background:red;"> </div> <div class="pb" style="background:blue;"> </div> <div class="pb" style="background:yellow;"> </div> </div> </div> </body></html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我有。网上也有很多
追问
还请发一个给我，网上的参次不齐，都有错误
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
