html代码如下:
<div class="wrapper">
<div id="focus">
<ul>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" id="pic"/></a>
<div class="preBtn" onclick="showPre()"></div>
<div class="nextBtn" onclick="showNext()"></div>
</li>
</ul>
</div>
</div>
css代码如下:
*{
margin:0;padding:0;
}
ul,li{
list-style:none;
}
img{
border:0;
}
.wrapper{
width: 800px;
margin: 0 auto;
padding-bottom: 50px;
}
#focus{
width: 800px;
height: 280px;
overflow: hidden;
position: relative;
}
#focus ul{
height: 380px;
position: absolute;
}
#focus ul li{
float: left;
width: 800px;
height: 280px;
overflow: hidden;
position: relative;
background: #000;
}
#focus ul li div{
position: absolute;
overflow: hidden;
}
#focus .preBtn{
width: 45px;
height: 100px;
left: 0;
top:90px;
background:url(images/spirte.png) no-repeat 0 0;
background-color:#000;
cursor: pointer;
opacity:0.4;
filter:alpha(opacity=40);
}
#focus .nextBtn{
width: 45px;
height: 100px;
right:0px;
top:90px;
background:url(images/spirte.png) no-repeat right top;
background-color:#000;
cursor: pointer;
opacity:0.4;
filter:alpha(opacity=40);}
javascrip代码如下:
var picsArr=new Array();
picsArr[0]="images/01.jpg";
picsArr[1]="images/02.jpg";
picsArr[2]="images/03.jpg";
picsArr[3]="images/04.jpg";
picsArr[4]="images/05.jpg";
var timer,index=0;
window.onload=showPic;
function showPic(){
document.getElementById("pic").src=picsArr[index];
if(index<(picsArr.length-1))
index++;
else
index=(index+1)%picsArr.length;
timer=setTimeout("showPic()",2000);
}
function showNext()
{
clearTimeout(timer);
showPic();
}
function showPre()
{
clearTimeout(timer);
showPrepic();
}
function showPrepic()
{
if(index>0)
index--;
else
index=4;
document.getElementById("pic").src=picsArr[index];
timer=setTimeout("showPrepic()",2000);
}
网盘链接:https://pan.baidu.com/s/1X_BXFyylAWYoI4DJoadgEg
密码: 4k0k