使用ul li 实现图片的左右滚动

最近项目中使用到了一个效果,即图片的左右滚动效果。

以前也写过,但是没有整理,这次顺手整理一下吧。

实现的思路很简单。

图片列表使用li 实现,在ul  的最外层包裹上div ,将这个div的overflow设置为隐藏,并且将ul的宽度设置到最够大。这样,里面的图片会水平排列,同时也会被隐藏住。

点击按钮的时候,改变外层div的scrollLeft属性,即相当于拖动它的滚动条。

代码如下:






无标题文档











<<
  • img1
  • img2
  • img3
  • img4
  • img5
  • img6
  • img7
  • img8
>>

关键在于,要将外层的div的overflow设置为隐藏,同时内部的ul宽度足够大!


附件:http://download.csdn.net/detail/lxl631/8417651

你可能感兴趣的:(jquery效果)