没有上传本地图片，可以自己添加图片试一下"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].οnclick=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.οnmοuseοver=function(){
clearInterval(times);
};
oBanner.οnmοuseοut=function(){
moveStar()
};
}
moveStar();
</script>
</body>
</html>
1403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
