圖片輪播 z-index方法
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>66666</title>
? ? <style type="text/css">
*{margin: 0;padding: 0;text-decoration: none;}
#container{width: 600px; height: 400px; border: 3px solid #333; position: relative;margin:20px;}
#list { width: 600px; height: 400px; position: absolute;}
#list img {width: 600px; height: 400px;position: absolute;}
#buttons .on { background: orange;}
#buttons{position: absolute; z-index: 2; bottom: 20px; left: 250px;}
#buttons span{width: 10px;height: 10px;border: #fff 1px solid;background-color: #333;border-radius: 50%;cursor: pointer;display: inline-block;}
.arrow{position: absolute;width: 40px;line-height: 40px;font-weight: bolder;font-size: 36px;text-align: center;color: #fff; cursor: pointer;display: none;height: 40px;z-index: 2;top: 180px;background-color: RGBA(0,0,0,.3);}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow{ display: block;}
#prev { left: 20px;}
#next { right: 20px;}
? ? </style>
? ? <script type="text/javascript">
window.onload = function () {
var container = document.getElementById('container');
var images = document.getElementById('list').getElementsByTagName('img');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var interval = 1000;
function animate(index){
? ? for (var i=0;i<images.length;i++){
images[i].style.zIndex='0';
? ? }
? ? images[index-1].style.zIndex='1';
} ? ? ? ?
function showButton(index){
for (var i=0;i < buttons.length;i++) {
buttons[i].className=''
};
buttons[index-1].className='on';
}
function play() {
timer = setTimeout(function () {
next.onclick();
play();
}, interval);
}
function stop() {
clearTimeout(timer);
};
prev.onclick=function(){
if (index===1){
index = 5;
}else{
index-=1
}
animate (index);
showButton(index);
}
next.onclick=function(){
if (index===5){
index = 1;
}else{
index+=1
}
animate (index);
showButton(index);
}
for (var i = 0; i < buttons.length; i++) {
? ? buttons[i].coo=i+1;
? ? buttons[i].onclick=function(){
? ? ? ? if(this.className == 'on') {
? ? ? ? ? ? return;
? ? ? ? }
? ? index=parseInt(this.coo);
? ? animate (index);
? ? showButton(index);
? ? }
};
container.onmouseover=stop;
container.onmouseout=play;
play();
};
? ? </script>
</head>
<body>
<div id="container">
? ? <div id="list">
? ? ? ? <img src="img/1.jpg" style="z-index:1" alt="1"/>
? ? ? ? <img src="img/2.jpg" alt="2"/>
? ? ? ? <img src="img/3.jpg" alt="3"/>
? ? ? ? <img src="img/4.jpg" alt="4"/>
? ? ? ? <img src="img/5.jpg" alt="5"/>
? ? </div>
? ? <div id="buttons">
? ? ? ? <span index="1" class="on"></span>
? ? ? ? <span index="2"></span>
? ? ? ? <span index="3"></span>
? ? ? ? <span index="4"></span>
? ? ? ? <span index="5"></span>
? ? </div>
? ? <a href="javascript:;" id="prev" class="arrow"><</a>
? ? <a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
