js图片向右一张张滚动效果实例代码_javascript技巧
程序员文章站
2022-05-05 12:34:40
...
先来张效果图
#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;}
样式
复制代码 代码如下:
#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实现新闻滚动效果(实例代码)_javascript技巧
-
js 文本滚动效果的实例代码_javascript技巧
-
纯js实现背景图片切换效果代码_javascript技巧
-
Javascript实现滚动图片新闻的实例代码_javascript技巧
-
JS打开层/关闭层/移动层动画效果的实例代码_javascript技巧
-
js实现图片轮换效果代码_javascript技巧
-
js实现收缩菜单效果实例代码_javascript技巧
-
js图片自动切换效果处理代码_javascript技巧
-
JS简单的轮播的图片滚动实例_javascript技巧
-
JS返回上一页实例代码通过图片和按钮分别实现_javascript技巧