js 그림 스크롤 효과 예제 코드를 one_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 단색 빨간색; 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{너비: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{배경 위치:왼쪽 상단;}
        .prev:hover{배경- 위치:왼쪽 하단;}
        .next{배경 위치:오른쪽 상단;}
        .next:hover{배경 위치:오른쪽 하단;}

html代码

复代码 代码如下:

       
   

   

       

           

               < ;img src="images/1.jpg" />
               
               
                < a href="#" title="4">
               
               
               

           

          

       

   

   

       
   

JS 코드

코드 복사 코드는 다음과 같습니다.