图片横向滚动效果有很多种,比如图片无缝循环的滚动,图片从左到右、从右到左两个方向的滚动,图片有放大镜效果的滚动等等。那懒人萱这次共享的JS特效代码是图片无缝循环的滚动和图片从左到右、从右到左两个方向(支持连续/停顿方式滚动)的图片横向滚动效果。这两种方式都可以用一个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特效代码,敬请期待!