琢磨了几个小时终于写出来了,上代码
这是布局结构
<div id="box">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/4.jpg" alt=""></a></li>
</ul>
<a id="prev"><</a>
<a id="next">></a>
</div>
这是样式
<style>
body,ul,ol{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
img{
border: none;
vertical-align: middle;
}
#box{
width: 600px;
height: 300px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#box ul{
position: absolute;
left: 0;
top:0;
height: 300px;
}
#box ul li{
float: left;
width: 600px;
height: 300px;
}
#box ul li a{
display: block;
height: 300px;
}
#box ul li a img{
width: 100%;
height: 100%;
}
#prev,#next{
position: absolute;
top: 130px;
width:40px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 30px;
font-weight: bold;
background: rgba(0,0,0,0.4);
color: #fff;
cursor: pointer;
}
#prev{
left: 0;
}
#next{
right: 0;
}
JS部分
<script>
window.onload = function(){
var oDiv = document.getElementById('box');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var num = 0;
var timer = null;
var lastChild = oUl.children[0].cloneNode(true); //为了实现无缝,将第一张图片复制放到最后面
oUl.appendChild(lastChild);
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
function autoPlay(){
timer = setInterval(function(){
num++;
move();
},2000);
}
autoPlay();
function move(){
if(num == aLi.length){ //当图片到最后一张的时候,将oUl的left值设为0重新开始
oUl.style.left = 0;
num = 1;
}
else if(num == -1){
oUl.style.left = -(aLi.length-1)*aLi[0].offsetWidth + 'px';
num = aLi.length-2;
}
doMove(oUl,'left',-num*aLi[0].offsetWidth);
}
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = autoPlay;
prev.onclick = function(){
num--;
move();
}
next.onclick = function(){
num++;
move();
}
}
function doMove(obj,attr,target){ //运动函数
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - parseInt(getStyle(obj,attr))) / 8; //设置速度,随着图片滚动,速度越来越小
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(parseInt(getStyle(obj,attr))== target){
clearInterval(obj.timer);
}else{
obj.style[attr] = parseInt(getStyle(obj,attr)) + speed + 'px';
}
},30);
}
function getStyle(obj,attr){ // 获取样式
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
</script>