复制代码 代码如下:

        #div_left{float:left;width:60px;height:86px;}
        #starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px solid red;float:left;}
        #starScroll #contentScroll{width:500%}
        #starScroll #ScrollOne{float:left;}
        #starScroll #ScrollOne a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
        #starScroll #ScrollOne img{width:204px;height:188px;border:0px;}
        #starScroll #ScrollTwo{float:left;}
        #starScroll #ScrollTwo a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
        #starScroll #ScrollTwo img{width:204px;height:188px;border:0px;}
        #div_right{float:left;width:60px;height:86px;}
        .arrow{background:url(images/arrow.png) no-repeat;cursor:pointer;height:86px;width:60px;cursor:pointer;display:block;margin-top:50px;}
        .prev{background-position:left top;}
        .prev:hover{background-position:left bottom;}
        .next{background-position:right top;}
        .next:hover{background-position:right bottom;}

复制代码 代码如下:

<div>
    <div id=\"div_left\">
        <span id=\"btn_left\" class=\"arrow prev\"></span>
    </div>
    <div id=\"starScroll\">
        <div id=\"contentScroll\">
            <div id=\"ScrollOne\">
                <a href=\"#\" title=\"1\"><img src=\"images/1.jpg\" /></a>
                <a href=\"#\" title=\"2\"><img src=\"images/2.jpg\" /></a>
                <a href=\"#\" title=\"3\"><img src=\"images/3.jpg\" /></a>
                <a href=\"#\" title=\"4\"><img src=\"images/4.jpg\" /></a>
                <a href=\"#\" title=\"5\"><img src=\"images/5.jpg\" /></a>
                <a href=\"#\" title=\"6\"><img src=\"images/6.jpg\" /></a>
                <a href=\"#\" title=\"7\"><img src=\"images/7.jpg\" /></a>
                <a href=\"#\" title=\"8\"><img src=\"images/8.jpg\" /></a>
            </div>
            <div id=\"ScrollTwo\"></div>
        </div>
    </div>
    <div id=\"div_right\">
        <span id=\"btn_right\" class=\"arrow next\"></span>
    </div>
</div>

复制代码 代码如下:

    <script type=\"text/javascript\">
var Scroll=(function(){
    return function(){
        var starScroll = document.getElementById(\"starScroll\"),
            ScrollOne = document.getElementById(\"ScrollOne\"),
            aCollection = ScrollOne.getElementsByTagName(\"a\"),
            aLength = aCollection.length,
            ScrollTwo = document.getElementById(\"ScrollTwo\"),
            btn_left = document.getElementById(\"btn_left\"),
            btn_right = document.getElementById(\"btn_right\");
        var Width = 204,Current = 1,Rate = 7,TimeTimeout=1000,TimeInterval=10,MarginRight=9;
        var SInterval=null,STimeout=null;
        var flag=true;
        function ScrollLeft(){
            var CountWidth = Current*Width+Current*MarginRight,
                SLeftPara=starScroll.scrollLeft;
            if(ScrollTwo.offsetWidth-SLeftPara==0){
                starScroll.scrollLeft=0;
                Current=0;
            }
            if(CountWidth-SLeftPara==0){
                Forward();
            }
            else{
                var v = Math.round((CountWidth-SLeftPara)/Rate);
                v = v<1 ? 1 : v;
                SetScrollLeft(SLeftPara+v);
            }
        }
        function SetScrollLeft(scrollleft){
            starScroll.scrollLeft=scrollleft;
        }
        function Init(){
            flag=false;
            SInterval=setInterval(ScrollLeft,TimeInterval);
        }
        function Forward(){
            clearInterval(SInterval);
            Current++;
            flag=true;
            STimeout = setTimeout(Init,TimeTimeout);
        }
        btn_right.onclick=function(){
            if(flag){
                clearTimeout(STimeout);
                Init();
            }
        }
        function ScrollRight(){
            var CountWidth = Current*Width+Current*MarginRight,
                SLeftPara = starScroll.scrollLeft;
            if(CountWidth-SLeftPara==0){
                Forward();
            }
            else{
                var v = Math.round((CountWidth-SLeftPara)/Rate);
                v = v>-1?-1:v;
                SetScrollLeft(SLeftPara+v);
            }
        }
        btn_left.onclick=function(){
            if(!flag){
                return;
            }
            flag=false;
            clearTimeout(STimeout);
            if(Current==1){
                SetScrollLeft(ScrollTwo.offsetWidth);
                Current=aLength+1;
            }
            Current-=2;
            SInterval = setInterval(ScrollRight,TimeInterval);
        }
        if(aLength>0){
            starScroll.scrollLeft=0;
            ScrollTwo.innerHTML = ScrollOne.innerHTML;
            STimeout = setTimeout(Init,TimeTimeout);
        }
    }
})();
Scroll();
    </script>