无缝轮播
轮播图大家都写过，但是怎么做到无缝切换对初学者来说是个难点。曾经也困惑了我很久，一直在研究，方法也很多，但是总是没有找到简便合适的。下面介绍一种，附上部分代码。
html代码：
<div id="box">
<li><img src="img/0.jpg" alt="">
<li><img src="img/1.jpg" alt="">
<li><img src="img/2.jpg" alt="">
<li><img src="img/3.jpg" alt="">
<li><img src="img/4.jpg" alt="">
<span id="left"></span>
<span id="right">></span>
</body>
css部分代码：
* {
margin:0;
padding:0;
list-style:none;
}
#box{
width:300px;
height:200px;
margin:100px auto;
position:relative;
overflow:hidden;
}
#box ul{
width:1500px;
height:200px;
}
ul li{
width:300px;
height:200px;
float:left;
}
img{
width:300px;
height:200px;
}
#left{
width:20px;
height:20px;
position:absolute;
left:10px;
top:90px;
border-radius:50%;
background:#ccc;
line-height:18px;
font-size:20px;
text-align:center;
display:none;
cursor:pointer;
}
#right{
width:20px;
height:20px;
position:absolute;
right:10px;
top:90px;
border-radius:50%;
background:#ccc;
line-height:18px;
font-size:20px;
text-align:center;
display:none;
cursor:pointer;
}
</style>
javascript的部分
var oBox=document.getElementById('box');
var oUl=document.querySelector('ul');
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
//当鼠标移入时显示左右按键
oBox.onmouseenter=function () {
oLeft.style.display='block';
oRight.style.display='block';
};
//当鼠标移出时隐藏左右按键
oBox.onmouseleave=function () {
oLeft.style.display='none';
oRight.style.display='none';
};
//点击右键图片开始移动
oRight.onclick=function () {
oUl.style.transition='.7s all linear';
oUl.style.transform='translateX(-300px)';
};
oUl.addEventListener('transitionend',function () {
oUl.style.transition='';
oUl.style.transform='translateX(0)';
oUl.appendChild(oUl.children[0]);
})
</script>
以上就是简单轮播图制作的部分代码。
