php 向右滚动代码,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代码

本文原创发布php中文网，转载请注明出处，感谢您的尊重！