<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>图片轮显JS学习</title>
<style type="text/css">
#slider-container, #slider-div{
position: relative;
width: 215px;
height: 350px;
overflow: hidden;
}
#slider-div img{
border: 0;
float: left;
}
#slider-ul{
left: 0;
top: 0;
margin: 0;
padding: 0;
list-style: none;
}
#slider-ul li{
float: left;
display: inline-block;
}
#slider-ul li img{
float: left;
border: 0;
width: 215px;
height: 350px;
}
#slider-num{
position: absolute;
margin: 0;
padding: 0;
bottom: 1px;
right: 2px;
list-style: none;
}
#slider-num li{
float: left;
margin: 3px 1px;
border: 1px solid #FF7300;
width: 16px;
height: 16px;
line-height: 16px;
font-size: 12px;
color: #FF7300;
text-align: center;
cursor: pointer;
background-color: #FFFFFF;
overflow: hidden;
}
#slider-num li.on{
color: #FFFFFF;
background-color: #FF7300;
font-weight: bold;
}
</style>
<script language="JavaScript" src="EdgesunSlider.js"></script>
<script language="JavaScript">
window.onload=function(){
var slider = new EdgesunSlider('slider-ul', 'slider-num', 215, 350, 5, parseInt(self.location.search.replace('?','')) ? 1: 0, 1000);
var sliderNum = document.getElementById("slider-num").getElementsByTagName("li");
for(var i=0; i<sliderNum.length; i++){
sliderNum[i].onmouseover = function(){slider.SetIndex(1, parseInt(this.innerHTML)-1);}
sliderNum[i].onmouseout = function(){slider.SetIndex(0,0);}
}
}
</script>
</head>
<body>
<input type="button" value=" 上下 " onclick="self.location='?0'" />
<input type="button" value=" 左右 " onclick="self.location='?1'" /><br /><br />
<div id="slider-container">
<div id="slider-div">
<ul id="slider-ul">
<!-----------请注意下面这行代码,必须在同一行上,否则IE8以下的浏览器上,图片之间会有空隙--------------------->
<li><a href="http://www.csdn.net/"><img src="1.jpg" /></a></li><li><img src="2.jpg" /></li><li><img src="3.jpg" /></li><li><img src="4.jpg" /></li><li><img src="5.jpg" /></li>
</ul>
</div>
<ul id="slider-num">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
</body>
</html>