<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script text="text/javascript">
var currIndex = 1;
function init(){
var length = 5;
var a1 = document.getElementById('a1');
var a2 = document.getElementById('a2');
a1.onclick = function() {
if(currIndex - 1 < 1)
currIndex = 6;
slideTo(currIndex - 1);
};
a2.onclick = function() {
if(currIndex + 1 > 5)
currIndex = 0;
slideTo(currIndex + 1);
};
for(var i = 0; i < length; i++){
document.getElementById('slideshow_footbar').innerHTML += '<div class = "slideshow-bt" index = "'+(length - i)+'"></div>';
}
var btns = document.getElementsByClassName('slideshow-bt');
btns[4].className = 'slideshow-bt bt-on';
for(var i=0; i < btns.length; i++) {
btns[i].onclick = function() {
slideTo(this.attributes['index'].value);
};
}
setInterval(function() {
if(currIndex + 1 > 5)
currIndex = 0;
slideTo(currIndex + 1);
},2000);
}
function slideTo(index) {
index = parseInt(index);
var picArr = document.getElementById('slideshow_photo').childNodes;
for(var i = 0; i < picArr.length;i++) {
if(picArr[i].attributes && picArr[i].attributes['index'] && parseInt(picArr[i].attributes['index'].value) == index) {
picArr[i].style.zIndex = 2;
currIndex = index;
}
else if(picArr[i].attributes && picArr[i].attributes['index']) {
picArr[i].style.zIndex = 1;
}
}
var btns = document.getElementsByClassName('slideshow-bt');
for(var i = 0; i < btns.length;i++) {
if(parseInt(btns[i].attributes['index'].value) == index) {
btns[i].className = 'slideshow-bt bt-on';
}
else {
btns[i].className= 'slideshow-bt';
}
}
}
</script>
<style>
#slideshow_wrapper {
position: relative;
padding-bottom: 0px;
background-color: #121212;
padding-left: 0px;
width: 720px;
padding-right: 0px;
height: 960px;
overflow: hidden;
padding-top: 0px;
margin: 0 auto;
}
#slideshow_footbar {
z-index: 5;
position: absolute;
filter: alpha(opacity = 50);
width: 720px;
bottom: 0px;
height: 30px;
background-color: black;
opacity: 0.5;
/*margin-left: 50px;*/
}
#slideshow_photo {
position: absolute;
width: 720px;
height: 100%;
cursor: pointer;
/*margin-left: 50px;*/
}
#slideshow_photo #a3 {
border-bottom: 0px;
position: absolute;
border-left: 0px;
margin: 0px;
display: block;
border-top: 0px;
top: 0px;
border-right: 0px;
left: 0px;
}
#slideshow_photo #a1 {
position: absolute;
left: 0px;
top: 300px;
}
#slideshow_photo #a2 {
position: absolute;
right: 0px;
top:300px;
}
#slideshow_photo #a1:hover,#slideshow_photo #a2:hover {
background-color: #999;
opacity: 0.6
}
#slideshow_footbar .slideshow-bt {
background-color: #d2d3d4;
margin: 10px 10px 0px 0px;
width: 10px;
display: inline;
float: right;
height: 10px;
font-size: 0px;
}
#slideshow_footbar .bt-on {
width: 10px;
height: 10px;
background-color: #30b1eb;
}
</style>
</head>
<body style="text-align: center" οnlοad="init();" >
<div id="slideshow_wrapper">
<div id="slideshow_photo">
<a href="#" target="_black" style="z-index: 3" id="a1"><img src="left.png" alt="" border="0"></a>
<a href="#" target="_black" style="z-index: 2" index="1" id="a3"><img src="1.jpg" alt="" border="0"></a>
<a href="#" target="_black" style="z-index: 1" index="2" id="a3"><img src="2.jpg" alt="" border="0"></a>
<a href="#" target="_black" style="z-index: 1" index="3" id="a3"><img src="3.jpg" alt="" border="0"></a>
<a href="#" target="_black" style="z-index: 1" index="4" id="a3"><img src="4.jpg" alt="" border="0"></a>
<a href="#" target="_black" style="z-index: 1" index="5" id="a3"><img src="5.jpg" alt="" border="0"></a>
<a href="#" target="_black" style="z-index: 3" id="a2"><img src="right.png" alt="" border="0"></a>
</div>
<div id="slideshow_footbar"></div>
</div>
</body>
</html>
2256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
