JS特效代码——图片横向滚动 无缝循环

图片横向滚动效果有很多种，比如图片无缝循环的滚动，图片从左到右、从右到左两个方向的滚动，图片有放大镜效果的滚动等等。那懒人萱这次共享的JS特效代码是图片无缝循环的滚动和图片从左到右、从右到左两个方向（支持连续/停顿方式滚动）的图片横向滚动效果。这两种方式都可以用一个JS代码实现，只是稍微的有些不同，如图所示：

JS特效代码大全（六）图片横向滚动效果

你首先要下载图片横向滚动效果源代码。为了方便大家，做成了两份下载文件，实际上区别很小。

下载地址见附件：

下载图片横向滚动效果源代码之后，你需要修改以下几个地方：

1、网页中的底部JS代码：dhs.showwidth = 330
　　此处的330指的是展示宽度，如上图中两个箭头之间的宽度，如果你改动了展示宽度，就一定要修改这里。

2、网页中的底部JS代码：dhs.go("left",true)
      此处的"left"指的是默认向左滚动，如果你想默认为向右滚动，把left改成right就可以了。

3、css文件中：#scroll {width:330px;height:86px;overflow:hidden;position:relative;z-index:2; float:left;}
　　此处的宽度值指的是展示宽度，和1相同。

4、css文件中：.mqdemoa {width:3960px!important;width:1980px;list-style:none;margin:0;padding:0;overflow:hidden;}
　　此处的宽度指的是全部展示内容的宽度，比如上图一共滚动六屏，那么宽度就是330*6，为了兼容火狐浏览器，还要设置兼容火狐的宽度，为IE的2倍。

5、JS文件中：this.steplength = 22
　　指的是每次滚动的长度，要根据展示宽度做调整，如果展示宽度较大，滚动的长度也要相应的变大些。

6、图片从左到右、从右到左两个方向的JS文件中：
　　(uvleft>=this.uvwidth-330){
　　his.scrollDOM.scrollLeft = this.uvwidth-330;
　　将330改为展示宽度即可。

此图片横向滚动效果已做过测试，可以兼容现在的所有主流浏览器，所以你可以放心使用这个图片横向滚动效果。

经过这么详细的介绍，相信大家都会使用这个图片横向滚动效果了，有什么不明白的地方欢迎大家留言讨论，懒人萱还会继续为大家写更多的JS特效代码，敬请期待！

 

附件：

图片从左到右、从右到左两个方向的滚动效果

 

图片无缝循环的滚动效果

本文来自oecp社区，近期会推出更多的js特效免费分享

相关博客：

• JS特效代码大全（三）可折叠的自动伸缩菜单
• JS特效代码大全（十一）超炫的js图片展示效果（三）
• JS特效代码大全（七）超全的JS树形菜单共享
• 推荐一款下载MSDN WebCast 工具