自动轮播图
下面这段代码可以自动播放图片（网上下载的，我没看懂），鼠标放在图片上停止轮播，移开鼠标继续播放，
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");
varoImgs = document.getElementById("imgs");
oImgs.setAttribute("src",oA);}
var aA = document.getElementById("btn").children;
for (var i=0;i<aA.length;i++) {
aA.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);
L.push(L);
L.shift()
return L;
/*L.appendChild(L);*/
//alert(L)
},1000);
varoBanner = document.getElementById("banner");
oBanner.onmouseover=function(){
clearInterval(times);
};
oBanner.onmouseout=function(){
moveStar()
};
}
moveStar();
</script>
</body>
</html>
showPic(elements){}函数，其中的elements是从哪里传过来的？ casanava 发表于 2019-6-20 19:30
showPic(elements){}函数，其中的elements是从哪里传过来的？
elements 是形参（parameter），每次单击事件被触发的时候（即 this 指向的事件）调用 showPic（this） 好，谢谢大侠，能否画出js整体流程图，我还是不太清楚 "每次单击事件被触发的时候",根本就没有按钮，怎么单击？ 这个问题我自己解决了，呵呵 现在用原生js实现轮播的已经很少了，建议看一下BootStrap前端框架，一个集成好的js库，很多前端功能，可以直接拿过来用 几行代码能解决的问题，没有必要弄的复杂
页:
[1]