本文实例讲述了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法。分享给大家供大家参考。具体如下：

这里介绍jQuery图片左右拖拽特效，无滚动条，将多张图片组合在一起形成的效果，插件使用的是jquery.nicescroll.js，拖动过程中不会出现滚动条，这样更美观了一些，若需要此效果，可参见下边框中的代码。

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlejquery。漂亮的卷轴无滚动条左右拖拽/title style * { margin 33600；划水：0;列表式：无；} img { border : none } # box scroll { height : 313 px宽度： 900像素；margin:0汽车飞越：汽车；} # box scroll div { width :12570 px；} # box scroll div img { float : left；}.第{ background: # FFFFCC}。第2行{背景： # 66 ccff}/style脚本src=' http : jquery-1。6 .2 .量滴js '/script script src=' http :http://夏仔。JB 51。net/201508/马援/jquery。不错的卷轴。js '/script脚本$(文档)。ready(function(){ var nicesx=$(' # box scroll ').niceScroll('#boxscroll div '，{touchbehavior:true，cursorcolor:'#FF00FF '，cursoropacitymax:0.6，cursorwidth:24，usetransition:true，hwacceleration:true，autohide mode : ' hide ' })；});/script/head dydiv id=' boxsoll ' div img src=' http://img。cppcns。com/pic。PHP？网址=/file _ images/article/201508/2015810124458663。jpg ' width=' 1257 ' height=' 313 ' on mouse down=' return false '/img src=' http://img。cppcns。com/pic。PHP？网址=/file _ images/article/201508/2015810124458663。jpg ' width=' 1257 ' height=' 313 ' on mouse down=' return false '/img src=' http://img。cppcns。com/pic。PHP？网址=/file _ images/article/201508/2015810124458663。jpg ' width=' 1257 ' height=' 313 ' on mouse down=' return false '/img src=' http://img。cppcns。com/pic。PHP？网址=/file _ images/article/201508/2015810124458663。jpg ' width=' 1257 ' height=' 313 ' on mouse down=' return false '/img src=' http://img。cppcns。com/pic。PHP？网址=/file _ images/article/201508/2015810124458663。jpg ' width=' 1257 ' height=' 313 ' on mouse down=' return false '/img src=' http://img。cppcns。com/pic。PHP？网址=/file _ images/article/201508/2015810124458663。jpg ' width=' 1257 ' height=' 313 ' on mouse down=' return false '/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。