js技术实现无缝滚动
实现要求:
1.页面加载完成让图片实现无缝滚动
2.鼠标移入左右两个按钮实现图片滚动方向的改变
3.鼠标移入图片实现图片停止滚动,移出实现图片滚动
具体实现代码如下:
1.Html页面代码
<div class="roll" id="roll">
<a href="javascript:void(0);" class="btn_left"></a>
<a href="javascript:void(0);" class="btn_right"></a>
<div class="wrap">
<ul>
<li>
<a href="http://www.miaov.com/"><img src="img/1.jpg" /></a>
</li>
<li>
<a href="http://www.miaov.com/"><img src="img/2.jpg" /></a>
</li>
<li>
<a href="http://www.miaov.com/"><img src="img/3.jpg" /></a>
</li>
<li>
<a href="http://www.miaov.com/"><img src="img/4.jpg" /></a>
</li>
</ul>
</div>
</div>
2.Css样式代码
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
border: 0;
}
.roll {
width: 698px;
height: 108px;
margin: 50px auto 0;
position: relative;
}
.btn_left {
display: block;
width: 68px;
height: 68px;
background: url(img/btn.jpg) no-repeat -70px -69px;
position: absolute;
top: 20px;
left: 1px;
z-index: 1;
}
.btn_left:hover {
background: url(img/btn.jpg) no-repeat -70px 0;
}
.btn_right {
display: block;
width: 68px;
height: 68px;
background: url(img/btn.jpg) no-repeat 1px -69px;
position: absolute;
top: 20px;
right: 0;
z-index: 1;
}
.btn_right:hover {
background: url(img/btn.jpg) no-repeat 1px 0;
}
.roll .wrap {
width: 546px;
height: 108px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.roll ul {
position: absolute;
top: 0px;
left: 0px;
}
.roll li {
float: left;
width: 182px;
height: 108px;
text-align: center;
}
.roll li a:hover {
position: relative;
top: 2px;
}
3.js实现代码
window.onload = function() {
var oDiv = document.getElementById('roll');//获取div
var oUl = oDiv.getElementsByTagName('ul')[0];//获取Ul
var aLi = oUl.getElementsByTagName('li');//获取li
var oBtn = oDiv.getElementsByTagName('a');//获取左右两边的按钮
var iSpeed = -5;
var timer ="";//定时器
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';//获取Ul的总长度
timer = setInterval(function() {
oUl.style.left = oUl.offsetLeft + iSpeed + 'px';//动态获取ul的长度
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = '0px'
}else if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2+'px'
}
}, 30)
oBtn[0].onmouseover = function(){
iSpeed = -5;
}
oBtn[1].onmouseover = function(){
iSpeed = 5;
}
oUl.onmouseover = function(){
clearTimeout(timer);
}
oUl.onmouseout = function(){
timer = setInterval(function() {
oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = '0px'
}else if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2+'px'
}
}, 30)
}
}
实现原理以及注意事项
1.通过setInterval--开启定时器和clearTimeout--关闭定时器
2.通过改变距离左边的值来实现图片的滚动
3.通过innerHtml来获取ul中的值
4.offsetLeft---左边距 offsetWidth---宽度