HTML部分：
<div
class="showbox" id="showbox">
<ul class="imgbox" id="imgbox" style="left:-518px ">
<li>
<a href="">
<img src="img/5.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/1.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="">
</a>
</li>
<li>
<a
href="">
<img src="img/4.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/1.jpg" alt="">
</a>
</li>
</ul>
<ul class="switchBtn" id="switchBtn">
<li ind="1" class="checked"></li>
<li ind="2"></li>
<li ind="3"></li>
<li ind="4"></li>
</ul>
</div>
Css部分
<style>
*{
margin: 0;padding: 0;
}
li{
list-style: none;
}
.showbox{
width: 518px;
height: 320px;
background: red;
position: relative;
top: 20%;
left: 30%;
overflow: hidden;
}
.showbox img{
width: 518px;
height: 320px;
}
.imgbox{
width: 3108px;
height: 320px;
position: absolute;
}
.imgbox li{
float: left;
}
.switchBtn{
width: 140px;
height: 6px;
position: absolute;
bottom: 18px;
left: 176px;
}
.switchBtn li{
width: 30px;
height: 6px;
background: #999999;
float: left;
margin-left: 5px;
}
.switchBtn
li.checked{
background: #990000;
}
</style>
Js部分
<script>
var ind
=1;
var
transfor2 = false;
var
Lunbotimer;
window.onload
= function(){
var switchBtns =
document.getElementById("switchBtn").getElementsByTagName("li");
var showbox
=document.getElementById("showbox");
for(var m=0; m<switchBtns.length;m++){
switchBtns[m].onmouseover =
function(){
if(transfor2){
return;
}
var myInd =
parseInt(this.getAttribute("ind"));
var offset =
-518*(myInd-ind);
ind = myInd;
};
}
autoplay();
};
//轮播函数
function
screenLunbo(offset){
transfor2 = true;
var imgbox =
document.getElementById("imgbox");
var time = 300;
var interval = 10;
var speed = offset/(time/interval);
var newLeft =
parseInt(imgbox.style.left)+offset;
//动画函数
function go(){
if((speed>0&&parseInt(imgbox.style.left)<newLeft)||
(speed<0&&parseInt(imgbox.style.left
)>newLeft)){
imgbox.style.left =
parseInt(imgbox.style.left)+speed+"px";
setTimeout(go,interval);
}
else{
transfor2 = false;
if(newLeft<-2072){
imgbox.style.left =
-518+"px";
}
else{
imgbox.style.left =
newLeft+"px";
}
}
}
go();
}
function
setSwitchBtn(){
var switchBtns =
document.getElementById("switchBtn").getElementsByTagName("li");
for(var i=0;i<switchBtns.length;i++){
if(switchBtns[i].className==="checked"){
switchBtns[i].className="";
break;
}
}
switchBtns[ind-1].className="checked";
}
//设置动漫自动播放
function
autoplay(){
Lunbotimer = setInterval(function(){
if(transfor2){
return;
}
if(ind===4){
ind=1;
}
else{
ind++;
}
screenLunbo(-518);
setSwitchBtn();
},2000);
}
//
function stop(){
clearInterval(Lunbotimer);
}
</script>
效果：
