|
|
3鱼币
下面这段代码可以自动播放图片（网上下载的，我没看懂），
鼠标放在图片上停止轮播，移开鼠标继续播放，
js部分的流程是怎样的，请大侠画出js流程，谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#banner{
height: 280px;
width: 320px;
position: relative;
background: red;
margin: 0 auto;
}
#btn{
position: absolute;
margin:50px 50px;
}
a:hover{
background: #CCCCCC;
}
</style>
</head>
<body>
<div id="banner">
<img id="imgs" src="img/moive1.png" style="height: 280px; width: 320px;"/>
<div id="btn">
<a href="LDY01.jpg"></a>
<a href="LDY02.jpg"></a>
<a href="LDY03.jpg"></a>
<a href="LDY04.jpg"></a>
<a href="LDY05.jpg"></a>
<a href="LDY06.jpg"></a>
</div>
</div>
<script>
function showPic(elements){
var oA = elements.getAttribute("href");
var oImgs = document.getElementById("imgs");
oImgs.setAttribute("src",oA);}
var aA = document.getElementById("btn").children;
for (var i=0;i<aA.length;i++) {
aA[i].onclick=function(){
showPic(this);
return false;
}
}
var L = ["LDY01.jpg","LDY02.jpg","LDY03.jpg","LDY04.jpg","LDY05.jpg","LDY06.jpg"];
function moveStar(){
clearInterval(times)
var times = setInterval(function(){
var oImges = document.getElementById("imgs");
oImges.setAttribute("src",L[0]);
L.push(L[0]);
L.shift()
return L;
/*L.appendChild(L[0]);*/
//alert(L)
},1000);
var oBanner = document.getElementById("banner");
oBanner.onmouseover=function(){
clearInterval(times);
};
oBanner.onmouseout=function(){
moveStar()
};
}
moveStar();
</script>
</body>
</html>
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-6-20 17:50:52
置顶卡
千斤顶
显身卡
楼主
发表于 2019-6-21 09:21:52
