Rumah > hujung hadapan web > tutorial js > js图片向右一张张滚动效果实例代码_javascript技巧

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

WBOY
Lepaskan: 2016-05-16 17:12:48
asal
983 orang telah melayarinya

先来张效果图

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

复制代码 代码如下:


   

       
   

   

       

           

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

           

       

   

   

       
   


JS代码

复制代码 代码如下:

   
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan