JavaScript實現輪播圖，滑鼠移入暫停播放，滑鼠移除開始播放
阿新 • • 發佈：2019-02-08
沒有上傳本地圖片，可以自己新增圖片試一下"img/banner-bw.png"這是小圓點圖片點選可以定位到某一張圖片
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<style>
#banner{
height: 280px;
width: 200px;
position: relative;
background: red;
margin: 0 auto;
}
#btn{
position: absolute;
margin-top: -25px;
}
a:hover{
background: #CCCCCC;
}
</style>
</head>
<body>
<div id="banner">
<img id="imgs" src="img/moive1.png" style="height: 280px; width: 200px;" />
<div id="btn">
<a href="img/moive1.png" ><img src="img/banner-bw.png"></a>
<a href="img/movie2.jpg" ><img src="img/banner-bw.png"></a>
<a href="img/movie3.jpg" ><img src="img/banner-bw.png"></a>
<a href="img/movie4.png" ><img src="img/banner-bw.png"></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 = ["img/movie4.png","img/movie2.jpg","img/movie3.jpg","img/movie4.png"];
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)
},4000);
var oBanner = document.getElementById("banner");
oBanner.onmouseover=function(){
clearInterval(times);
};
oBanner.onmouseout=function(){
moveStar()
};
}
moveStar();
</script>
</body>
</html>