图片横向滚动效果有很多种，比如图片无缝循环的滚动，图片从左到右、从右到左两个方向的滚动，图片有放大镜效果的滚动等等。那懒人萱这次共享的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特效代码，敬请期待！
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
