<style>
*{ margin:0; padding:0; list-style:none; }
.box{ width:520px; height:280px; margin:100px auto; overflow:-hidden; position:relative; border:2px solid pink; }
.box ul{ width:520px; height:248px; position:relative; }
.box li{ position:absolute; left:0; top:0; }
.box p{ cursor:pointer; position:absolute; top:50%; margin-top:-50px; height:100px; width:50px; background:rgba(0,0,0,0.5); color:#fff; font-size:36px; line-height:100px; text-align:center; }
.box #prev{ left:0; }
.box #next{ right:0; }
#btn{ position:absolute; bottom:10px; left:50%; margin-left:-60px; }
#btn span{ cursor:pointer; width:20px; height:20px; background:#f00; float:left; margin:5px; }
#btn .on{ background:yellow; }
</style>
<script src="js/move.js"></script>
<script>
window.onload=function (){
var oUl=document.getElementById(‘ul‘);
var aLi=oUl.children;
var oPrev=document.getElementById(‘prev‘);
var oNext=document.getElementById(‘next‘);
var aBtn=document.getElementById(‘btn‘).children;
var iNow=0;
for(var i=0; i<aBtn.length; i++){
(function (index){
aBtn[i].onclick=function (){
iNow=index;
tab();
};
})(i);
}
function tab(){
for(var i=0; i<aBtn.length; i++){
aBtn[i].className=‘‘;
move(aLi[i],{opacity:0});
}
aBtn[iNow].className=‘on‘;
move(aLi[iNow],{opacity:1});
}
oNext.onclick=function (){
iNow++;
if(iNow==aBtn.length){
iNow=0;
}
tab();
};
oPrev.onclick=function (){
iNow--;
if(iNow==-1){
iNow=aBtn.length-1;
}
tab();
};
};
</script>
<body>
<div id="box" class="box">
<ul id="ul">
<li><img src="images/3.webp" /></li>
<li><img src="images/0.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
</ul>
<p id="prev"><</p>
<p id="next">></p>
<div id="btn">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>