首页 > 特效插件 > 滚动轮播 >  带左右箭头的JS图片无缝滚动正文

带左右箭头的JS图片无缝滚动

特效介绍
js图片左右滚动
带左右箭头的JS图片无缝滚动，可随意扩展N张图片。兼容各种主流浏览器
使用方法
1、讲如下代码放入head区：
查看代码
打印?
01<style type="text/css" media="screen">
02*{margin:0px;padding:0px;list-style:none;text-decoration:none;}
03a,img{border:none;}
04.rollBox{height:116px;margin:0;width:953px;overflow:hidden}
05.rollBox .scrollcon{width:953px;height:116px;}
06.rollBox .LeftBotton{height:68px;width:22px;background:#ff0000 url(images/1294825702857.jpg) no-repeat 0px 0;overflow:hidden;float:left;display:inline;margin:0px;cursor:pointer; margin-top:25px;}
07.rollBox .RightBotton{height:68px;width:22px;background:#ff0000 url(images/1294825623597.jpg);overflow:hidden;float:left;display:inline;margin:0px;cursor:pointer; margin-top:25px;}
08.rollBox .Cont{width:890px;overflow:hidden;float:left;height:116px;}
09.rollBox .ScrCont{width:10000000px;}
10.rollBox .Cont .pic{width:168px;height:116px;overflow:hidden;float:left;}
11.rollBox .Cont .pic img{background:#fff;display:block;}
12.rollBox #List1, .rollBox #List2{float:left;}
13</style>

2、把以下代码拷贝到你想引用的地方
查看代码
打印?
001<div class="rollBox">
002    <div class="scrollcon">
003        <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
004        <div class="Cont" id="ISL_Cont">
005            <div class="ScrCont">
006                <div id="List1">
007                    <!-- 图片列表 begin -->
008                    <div class="pic"><a  href="#"><img width="168" height="116"  src="images/game1.jpg"  /></a></div>
009                    <div class="pic"><a  href="#"><img width="168" height="116"  src="images/game2.jpg"  /></a></div>
010                    <div class="pic"><a  href="#"><img width="168" height="116"  src="images/game3.jpg"  /></a></div>
011                    <div class="pic"><a  href="#"><img width="168" height="116"  src="images/game4.jpg"  /></a></div>
012                    <div class="pic"><a  href="#"><img width="168" height="116"  src="images/game1.jpg"  /></a></div>
013                    <div class="pic"><a  href="#"><img width="168" height="116"  src="images/game2.jpg"  /></a></div>
014                    <div class="pic"><a  href="#"><img width="168" height="116"  src="images/game3.jpg"  /></a></div>
015                    <div class="pic"><a  href="#"><img width="168" height="116"  src="images/game4.jpg"  /></a></div>
016                    <!-- 图片列表 end -->
017                </div>
018                <div id="List2"></div>
019            </div>
020        </div>
021        <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
022    </div><!--content end-->
023</div><!--rollBox end-->
024 
025<script type="text/javascript">
026//图片滚动列表
027var Speed = 0.01;//速度(毫秒)
028var Space = 5;//每次移动(px)
029var PageWidth = 182;//翻页宽度
030var fill = 0;//整体移位
031var MoveLock = false;
032var MoveTimeObj;
033var Comp = 0;
034var AutoPlayObj = null;
035GetObj("List2").innerHTML = GetObj("List1").innerHTML;
036GetObj('ISL_Cont').scrollLeft = fill;
037GetObj("ISL_Cont").onmouseover = function(){
038    clearInterval(AutoPlayObj);
039}
040GetObj("ISL_Cont").onmouseout = function(){
041    AutoPlay();
042}
043 
044AutoPlay();
045 
046function GetObj(objName){
047    if(document.getElementById){
048        return eval('document.getElementById("'+objName+'")')
049    }else{
050        return eval('document.all.'+objName)
051    }
052}
053 
054function AutoPlay(){ //自动滚动
055    clearInterval(AutoPlayObj);
056    AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',2000);//间隔时间
057}
058 
059function ISL_GoUp(){ //上翻开始
060    if(MoveLock) return;
061    clearInterval(AutoPlayObj);
062    MoveLock = true;
063    MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
064}
065 
066function ISL_StopUp(){ //上翻停止
067    clearInterval(MoveTimeObj);
068    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
069        Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
070        CompScr();
071    }else{
072        MoveLock = false;
073    }
074    AutoPlay();
075}
076 
077function ISL_ScrUp(){ //上翻动作
078    if(GetObj('ISL_Cont').scrollLeft <= 0){
079        GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth
080    }
081        GetObj('ISL_Cont').scrollLeft -= Space ;
082}
083 
084function ISL_GoDown(){ //下翻
085    clearInterval(MoveTimeObj);
086    if(MoveLock) return;
087    clearInterval(AutoPlayObj);
088    MoveLock = true;
089    ISL_ScrDown();
090    MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
091}
092function ISL_StopDown(){ //下翻停止
093    clearInterval(MoveTimeObj);
094    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
095        Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
096        CompScr();
097    }else{
098        MoveLock = false;
099    }
100    AutoPlay();
101}
102 
103function ISL_ScrDown(){ //下翻动作
104    if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){
105        GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;
106    }
107    GetObj('ISL_Cont').scrollLeft += Space ;
108}
109 
110function CompScr(){
111    var num;
112    if(Comp == 0){
113        MoveLock = false;return;
114    }
115    if(Comp < 0){ //上翻
116        if(Comp < -Space){
117            Comp += Space;
118            num = Space;
119        }else{
120            num = -Comp;
121            Comp = 0;
122        }
123        GetObj('ISL_Cont').scrollLeft -= num;
124        setTimeout('CompScr()',Speed);
125    }else{ //下翻
126        if(Comp > Space){
127            Comp -= Space;
128            num = Space;
129        }else{
130            num = Comp;
131            Comp = 0;
132        }
133        GetObj('ISL_Cont').scrollLeft += num;
134        setTimeout('CompScr()',Speed);
135    }
136}
137</script>

滚动图片的数量在可以随意增减
Speed为滚动速度(毫秒)
Space为每次移动距离(px)
PageWidth为翻页宽度(PX)
fill有0和1两个值，表示是否整体移位
TAGS: js图片无缝滚动