js图片向右一张张滚动效果实例代码_javascript技巧

先来张效果图

样式

复制代码 代码如下:

        #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;}

html代码

复制代码 代码如下:

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

JS代码

复制代码 代码如下:

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