本例仅作为运动框架move.js的扩展应用,实现点击下方提示按钮切换幻灯片的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 400px;
height: 400px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#ul1{
list-style: none;
position: absolute;
left: 0;
top: 0;
}
#ul1 li{
float: left;
}
img{
display: block;
}
#div2{
position: absolute;
bottom: 10px;
overflow: hidden;
left: 50%;
margin-left: -40px;
}
#div2 span{
display: block;
width: 10px;
height: 10px;
background: #999999;
border-radius: 50%;
float: left;
margin: 0 5px;
cursor: pointer;
}
#div2 span.current{
background: #f90;
}
</style>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName('li');
var aSpan=oDiv.getElementsByTagName('span');
var len=aLi.length;
var iWidth=aLi[0].offsetWidth;
oUl.style.width=len*iWidth+'px';
for (var i=0; i<len; i++) {
aSpan[i].index = i;
aSpan[i].onclick=function(){
for (var i=0; i<len; i++) {
aSpan[i].className='';
}
this.className='current';
startMove(oUl,{
left:-this.index*iWidth
})
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
<div id="div2">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>