js实现无缝滚动

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---宽度