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

先来张效果图

样式复制代码代码如下： # div _ left { float:left宽度：60 px高度：86 px} # starScroll { width :843 pxh8 :188 px边距-左侧：15像素；右边距：15 px填充-top :9 px；飞越：隐藏；border:1px纯红；float:left } # starScroll #内容滚动{宽度：500% } # starcroll # ScrollOne { float : left；} # starScroll # ScrollOne a { float : left；宽度宽度：204像素重量：188像素右边距：9 pxfloat : leftisplay : inline } # starScroll # ScrollOne img { width :204 px；height :188 pxborder :0 px } # starScroll #向左滚动两个{ float :} # starScroll #滚动两个a { float : left宽度宽度：204像素重量：188像素右边距：9 pxfloat : leftisplay : inline } # starScroll #滚动两个img { width :204 pxheight :188 pxborder :0 px } # div _ right { float : left宽度：60 px高度：86 px} .箭头{背景： URL(图像/箭头。png)不重复；光标：指针指针；高度：86 px宽度：60 px光标：指针指针；显示：块；页边距-顶部：50像素；} .prev { background-position :左上角；} .prev :悬停{背景-位置：左下方；} .下一个{背景位置：右上；} .下一个：悬停{背景-位置：右下方；}html代码复制代码代码如下： 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=' http 3360 images/1。jpg '/a href=' # ' title=' 2 ' img src=' http : images/2。jpg '/a href代码复制代码代码如下：脚本类型=' text/JavaScript ' var Scroll=(function(){ return function(){ var star croll=document。getelementbyid(' starcroll ')、ScrollOne=document。getelementbyid(' ScrollOne ')、accollection=ScrollOne。getelementsbytagname(' a ')、aLength=aCollection.length、scroltwo=document。getelementbyid(' scroltwo ')、BTN _ left=document。getelementbyid(' BTN _左')var Width=204，Current=1，Rate=7，TimeTimeout=1000，TimeInterval=10，右边距=9；var SInterval=null，STimeout=nullvar标志=真；函数scrolle ft(){ var count Width=Current * Width Current *右边距，sleft para=starscroll . scrolletif(滚动两次。offsetwithts-SleftPara==0){ starscroll。向左滚动=0；电流=0;} if(计数宽度-SLeftPara==0){ Forward()；} else { var v=math。round((计数宽度-SLeftPara)/Rate)；v=v1？1 :vsetscrolleft(SleftParA v)；} }函数setscroll ft(scroll ft){ starscroll。scrolleft=scrolleft}函数init(){ flag=false；sinerval=设置间隔(滚动，时间间隔)；}函数forward(){ clearInterval(SInterval)；当前；标志=真时间输出=设置时间输出（初始化，时间输出);} BTN _对。onclick=function(){ if(flag){清除超时(Stimiteout)；init()；} }函数向右滚动(){ var count Width=Current * Width Current *右边距，sleft para=starcroll。向左滚动；if(计数宽度-SLeftPara==0){ Forward()；} else { var v=math。round((计数宽度-SLeftPara)/Rate)；v=v-1？-1:v；setscrolleft(SleftParA v)；} } BTN _左。onclick=function(){ if(！flag){ return；} flag=falseclear超时(stime out)；if(Current==1){ setscrolleft(scroltwo。偏移)；电流=aLength 1；}当前-=2;sinerval=设置间隔(向右滚动，时间间隔)；} if(alength 0){ starscroll。scrolleft=0；scrolltwo。innerhtml=scrollone。innerhtml时间输出=设置时间输出（初始化，时间输出);} }})();卷轴();/script