JavaScript实现轮播图，鼠标移入暂停播放，鼠标移除开始播放

来源：互联网发布：安卓手机 mac照片编辑：程序博客网时间：2024/06/07 04:31

没有上传本地图片，可以自己添加图片试一下"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>

阅读全文

0 0