HTML部分
<div id="box">
<a id="left" href="javascript:;"> ← </a>
<a id="right" href="javascript:;"> → </a>
<div id="fonttop"></div>
<img id="image" />
<div id="fontbottom"></div>
</div>
css部分
#box{
width:1280px;
height: 544px;
border: 2px solid red;
overflow: hidden;
margin: 100px auto;
}
#left{
width: 50px;
height: 50px;
background: rgba(0,0,0,0.5);
font-family: "微软雅黑";
font-size: 35px;
text-align: center;
text-decoration: none;
color: white;
position: absolute;
top: 350px;
left: 160px;
}
#right{
width: 50px;
height: 50px;
background: rgba(0,0,0,0.5);
font-family: "微软雅黑";
font-size: 35px;
text-align: center;
text-decoration: none;
color: white;
position: absolute;
top: 350px;
left: 1300px;
}
#fonttop{
width: 1280px;
height: 50px;
background: rgba(40,20,0,0.5);
position: absolute;
color: white;
text-align: center;
}
#fontbottom{
width: 1280px;
height: 50px;
background: rgba(40,20,0,0.5);
position: absolute;
top: 596px;
color: white;
text-align: center;
}
js部分
var lefts=document.getElementById("left");
var rights=document.getElementById("right");
var fonttops=document.getElementById("fonttop");
var images=document.getElementById("image");
var fontbottoms=document.getElementById("fontbottom");
var num=0;
var img=["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
var font=["文字一","文字二","文字三","文字四","文字五"];
fonttops.innerHTML=num+1 +"/"+img.length;
images.src=img[num];
fontbottoms.innerHTML=font[num];
var time=setInterval(times,1000);
function tsb(){
fonttops.innerHTML=num+1 +"/"+img.length;
images.src=img[num];
fontbottoms.innerHTML=font[num];
}
function times(){
num++;
if(num==img.length){
num=0;
}
tsb();
}
rights.οnclick=function(){
times();
}
lefts.οnclick=function(){
num--;
if(num<0){
num=img.length-1;
}
tsb();
}
images.οnmοusemοve=function(){
clearInterval(time);
}
images.οnmοuseοut=function(){
time=setInterval(times,1000);
}