部分功能没有实现 只是让图片动起来了
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
img{
vertical-align: top;
}
#box{
width: 800px;
height: 460px;
border: 2px solid gainsboro ;
margin: 100px auto ;
overflow: hidden;
position: relative;
cursor: pointer;
}
ul{
width: 4000px;
height: 100%;
position: absolute;
left: -800px;
}
ul li {
float: left
}
span{
display: inline-block;
width: 44px;
height: 44px;
border: 1px solid;
border-radius: 100%;
text-align: center;
line-height: 44px;
font-size: 30px;
font-weight: bold;
cursor: pointer;
z-index: 1000;
}
#span1{
position: absolute;
left: 580px;
top: 320px;
}
#span2{
position: absolute;
left: 1284px;
top: 320px;
}
</style>
<body>
<div id="box">
<ul id="ul">
<li><img src="img/poster-1.jpg" alt="" /></li>
<li><img src="img/poster-2.jpg" alt="" /></li>
<li><img src="img/poster-3.jpg" alt="" /></li>
<li><img src="img/poster-4.jpg" alt="" /></li>
<li><img src="img/poster-5.jpg" alt="" /></li>
</ul>
</div>
<span style="display: none;" id="span1" >
<
</span>
<span style="display: none;" id="span2">></span>
<script>
window.onload=function(){
var ul=document.getElementById("ul");
var timer; index=0;
var box=document.getElementById("box");
var span1=document.getElementById("span1");
var span2=document.getElementById("span2");
box.onmouseover=function(){
span1.style.display="block";
span2.style.display="block";
}
box.onmouseout=function(){
span1.style.display="none";
span2.style.display="none";
}
//启动定时器
timer=setInterval(run,1000);
function run(){
ul.style.left=-(index*800)+"px";
index++;
if(index>4){
index=0;
}
}
}
</script>
