提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS实例代码 图片 效果 滚动 一张
2023-06-13 09:15:12 时间

先来张效果图

样式

复制代码代码如下:

       #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:1pxsolidred;float:left;}
       #starScroll#contentScroll{width:500%}
       #starScroll#ScrollOne{float:left;}
       #starScroll#ScrollOnea{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
       #starScroll#ScrollOneimg{width:204px;height:188px;border:0px;}
       #starScroll#ScrollTwo{float:left;}
       #starScroll#ScrollTwoa{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
       #starScroll#ScrollTwoimg{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:lefttop;}
       .prev:hover{background-position:leftbottom;}
       .next{background-position:righttop;}
       .next:hover{background-position:rightbottom;}

html代码

复制代码代码如下:

<div>
   <divid="div_left">
       <spanid="btn_left"class="arrowprev"></span>
   </div>
   <divid="starScroll">
       <divid="contentScroll">
           <divid="ScrollOne">
               <ahref="#"title="1"><imgsrc="images/1.jpg"/></a>
               <ahref="#"title="2"><imgsrc="images/2.jpg"/></a>
               <ahref="#"title="3"><imgsrc="images/3.jpg"/></a>
               <ahref="#"title="4"><imgsrc="images/4.jpg"/></a>
               <ahref="#"title="5"><imgsrc="images/5.jpg"/></a>
               <ahref="#"title="6"><imgsrc="images/6.jpg"/></a>
               <ahref="#"title="7"><imgsrc="images/7.jpg"/></a>
               <ahref="#"title="8"><imgsrc="images/8.jpg"/></a>
           </div>
           <divid="ScrollTwo"></div>
       </div>
   </div>
   <divid="div_right">
       <spanid="btn_right"class="arrownext"></span>
   </div>
</div>

JS代码

复制代码代码如下:
   <scripttype="text/javascript">
varScroll=(function(){
   returnfunction(){
       varstarScroll=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");
       varWidth=204,Current=1,Rate=7,TimeTimeout=1000,TimeInterval=10,MarginRight=9;
       varSInterval=null,STimeout=null;
       varflag=true;
       functionScrollLeft(){
           varCountWidth=Current*Width+Current*MarginRight,
               SLeftPara=starScroll.scrollLeft;
           if(ScrollTwo.offsetWidth-SLeftPara==0){
               starScroll.scrollLeft=0;
               Current=0;
           }
           if(CountWidth-SLeftPara==0){
               Forward();
           }
           else{
               varv=Math.round((CountWidth-SLeftPara)/Rate);
               v=v<1?1:v;
               SetScrollLeft(SLeftPara+v);
           }
       }
       functionSetScrollLeft(scrollleft){
           starScroll.scrollLeft=scrollleft;
       }
       functionInit(){
           flag=false;
           SInterval=setInterval(ScrollLeft,TimeInterval);
       }
       functionForward(){
           clearInterval(SInterval);
           Current++;
           flag=true;
           STimeout=setTimeout(Init,TimeTimeout);
       }
       btn_right.onclick=function(){
           if(flag){
               clearTimeout(STimeout);
               Init();
           }
       }
       functionScrollRight(){
           varCountWidth=Current*Width+Current*MarginRight,
               SLeftPara=starScroll.scrollLeft;
           if(CountWidth-SLeftPara==0){
               Forward();
           }
           else{
               varv=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>

相关文章