js无缝滚动

1.html代码

<div class="box">
        <ul>
            <li class="show"><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>

2.css代码

<style type="text/css">
    body, div, ul ,li, ol{margin:0;padding:0;}
    img{border:none;vertical-align: top}
    li{list-style: none}
    .box{width:470px;height: 150px;margin:30px auto;overflow:hidden;position: relative;}
    ul{width:470px;height: 150px;position: absolute;left:0;top:0;z-index:1;}
    ul li{float: left;width: 470px;}
    ul li.show{display: block;}
    ol{position: absolute;right: 10px;bottom:10px;z-index: 2;width:120px}
    ol li{float: left;width: 20px;height:20px;background: #fff;color:orange;margin-right:3px;line-height: 20px;text-align: center;cursor:pointer;}
    ol li.active{background: orange;color:#fff;}
    </style>

3.js

window.onload = function(){
        var oUl = document.getElementsByTagName(‘ul‘)[0],
            oOL = document.getElementsByTagName(‘ol‘)[0],
            aLi = oUl.getElementsByTagName(‘li‘),
            aOL = oOL.getElementsByTagName(‘li‘),
            oneHeight = aLi[0].offsetHeight,
            iNow = 0,
            iNow2 = 0,
            time = null,
            oBox = document.querySelector(‘.box‘);
            for(var i=0; i<aLi.length;i++){
                aOL[i].index = i;
                aOL[i].onclick = function(){
                    for(var j=0; j<aOL.length; j++){
                        aOL[j].className = ‘‘;
                    }
                aOL[this.index].className = ‘active‘;
                iNow = this.index;
                startMove(oUl,{top : -this.index*oneHeight})
                }
            }

            time = setInterval(run,1000)
            oBox.onmouseover = function(){
                clearInterval(time);
            }
            oBox.onmouseout = function(){
                time = setInterval(run,1000)
            }
            function run(){
                if(iNow == 0){
                    aLi[0].style.position = ‘static‘;
                    oUl.style.top = 0;
                    iNow2 = 0;
                }
                if(iNow == aLi.length - 1){
                    iNow = 0;
                    aLi[0].style.position = "relative";
                    aLi[0].style.top = aLi.length*oneHeight + ‘px‘;
                }else{
                iNow++;
                }
                iNow2++;
                    for(var j=0; j<aOL.length; j++){
                        aOL[j].className = ‘‘;
                    }
                    aOL[iNow].className = ‘active‘;
                startMove(oUl,{top : -iNow2*oneHeight})
            }
    }

4.运动框架

// JavaScript Document

function startMove(obj,json,endFn){

        clearInterval(obj.timer);

        obj.timer = setInterval(function(){

            var bBtn = true;

            for(var attr in json){

                var iCur = 0;

                if(attr == ‘opacity‘){
                    if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

                    }
                    else{
                        iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                    }
                }
                else{
                    iCur = parseInt(getStyle(obj,attr)) || 0;
                }

                var iSpeed = (json[attr] - iCur)/8;
            iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur!=json[attr]){
                    bBtn = false;
                }

                if(attr == ‘opacity‘){
                    obj.style.filter = ‘alpha(opacity=‘ +(iCur + iSpeed)+ ‘)‘;
                    obj.style.opacity = (iCur + iSpeed)/100;

                }
                else{
                    obj.style[attr] = iCur + iSpeed + ‘px‘;
                }

            }

            if(bBtn){
                clearInterval(obj.timer);

                if(endFn){
                    endFn.call(obj);
                }
            }

        },30);

    }

    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }

5.一个无缝滚动的效果就做了出来