在做web前端开发中，图片左右滑动的功能非常常用。在自己的改进下，这款插件支持
1.滑动方向的控制，上下滑动，左右滑动。
2.可随意改变滑动的区域大小
3.滑动中的样式都可以自定义。
4.兼容性良好，moz，ie，webkit
5.对滑动加入延迟加载
6.支持页面中的多处调用
以下是代码解析：
下看html结构：
/*参数
horizontal为1，水平滚动，
为0，垂直滚动，
可根据需求改变CSS满足页面要求
*/
<div class="cnt_goods_wrap cfix picSilde_style" horizontal="1"> <div class="cnt_goods_box"> <ul class="cnt_goods_list fl cfix cnt_border" > <li class="cnt_goods_item"> <div class="pro_img"> <a target="_blank" title="麦多多 Apple/苹果ipad5/ipad air钢化玻璃膜" href="http://www.okhqb.com/item/1000107901.html"> <img alt="麦多多 Apple/苹果ipad5/ipad air钢化玻璃膜" data-original="http://img1.hqbcdn.com/thumbs/product/bc/9c/bc9cfa5d80ce9c978b39fe9ac48cd70c.218.jpg" class="lazy" src="http://s.hqbcdn.com/assets/v3/images/blank.gif" style="display: inline;"></a> </div> </li> </ul> </div> <div style="clear:both" class=""></div> </div>
CSS文件类容
.cnt_goods_wrap .cnt_goods_box{ position:relative; width:1198px; height:351px; overflow:hidden; float:left; z-index:1; } .cnt_goods_wrap .cnt_goods_box .cnt_goods_list{ position:absolute; top:0px; left:0px; } .cnt_goods_wrap .cnt_goods_box .cnt_goods_list li{ width:239px; background:#fff; float:left; } .cnt_goods_wrap .cnt_goods_box .cnt_goods_list li .pro_img{ width:239px; text-align:center; vertical-align:middle; display:table-cell; *display: block; *font-family:Arial; } .cnt_goods_wrap .cnt_goods_box .cnt_goods_list li .pro_img img{ width:218px; height:218px; text-align:center; vertical-align:middle; margin-top:25px; } .cnt_goods_wrap .pre{ position:absolute; top:100px; left:10px; z-index:88; width:34px; height:107px;} .cnt_goods_wrap .pre a{display:block; background:url(images/left_btn.jpg) no-repeat; width:34px; height:107px; z-index:288; } .cnt_goods_wrap .next{ position:absolute; top:100px; right:10px; z-index:288; width:34px; height:107px; } .cnt_goods_wrap .next a{ display:block; background:url(images/right_btn.jpg) no-repeat; width:34px; height:107px; } .cnt_goods_wrap .pre a:hover{ } .cnt_goods_wrap .next a:hover{ }
对应的插件js内容：
$.extend({ /*调用滑动*/ /*根据加载的li标签数量初始化HTML中的结构*/ $(".cnt_goods_list").each(function(i,index){ var _hori = $(this).parents('.cnt_goods_wrap').attr('horizontal'), _hori = parseInt( _hori ); if(_hori){ var cgi_w = $(this).find("li.cnt_goods_item").outerWidth(true); var cgl_width = ( $(index).find(".cnt_goods_item").length ) *cgi_w; $(index).css("width", cgl_width+"px"); }else{ var cgi_h = $(this).find("li.cnt_goods_item").outerHeight(true); var cgl_height = ( $(index).find(".cnt_goods_item").length ) *cgi_h; $(index).css("height", cgl_height+"px"); } }); /*只有一屏的时候，不出现左右滑动箭头*/ $(".cnt_goods_list").each(function(){ var i = $(picSilde_style).find('.cnt_goods_box').width() / $(picSilde_style).find('li.cnt_goods_item').width(); i = floor(i); var style_len = ($(this).find("li.cnt_goods_item").length)/i; if( style_len <= 1 ){ $(this).parents(".cnt_goods_wrap").find(".pre").hide(); $(this).parents(".cnt_goods_wrap").find(".next").hide(); } }) picScroll: function(picSilde_style){ var page =1; var hori; var _next = $(picSilde_style).children(".next"); var _pre = $(picSilde_style).children(".pre"); var _hori = $(picSilde_style).attr('horizontal'), _hori = parseInt( _hori ); var i = $(picSilde_style).find('.cnt_goods_box').width() / $(picSilde_style).find('li.cnt_goods_item').width(); i = floor(i); /*next down*/ /*处理向下箭头，向后箭头*/ $(_next).click(function(){ var cnt_goods_box = $(this).siblings(".cnt_goods_box"); var cnt_goods_list = cnt_goods_box.find(".cnt_goods_list"); var cgb_width = cnt_goods_box.width(); var cgb_height = cnt_goods_box.height(); var page_temp = parseInt((cnt_goods_list.find("li.cnt_goods_item").length)/i ) ; var remainder = (cnt_goods_list.find("li.cnt_goods_item").length)%i; var page_count; if( remainder == 0 ){ page_count = page_temp; }else{ page_count = page_temp + 1; } if( $(this).siblings(".pre").find("a").hasClass("pre_unable")){ $(this).siblings(".pre").find("a").removeClass("pre_unable"); } if( !cnt_goods_list.is(":animated") ){ if(page == page_count ){ $(this).find("a").addClass("next_unable"); }else{ if( _hori ){ cnt_goods_list.animate({left:'-='+cgb_width},'5000'); }else{ cnt_goods_list.animate({top:'-='+cgb_height},'5000'); } page++; } } }); /*pre up*/ /*处理向上箭头，向前箭头*/ $(_pre).click(function(){ var cnt_goods_box = $(this).siblings(".cnt_goods_box"); var cnt_goods_list = cnt_goods_box.find(".cnt_goods_list"); var cgb_width = cnt_goods_box.width(); var cgb_height = cnt_goods_box.height(); var page_temp = parseInt((cnt_goods_list.find(".cnt_goods_item").length)/i ) ; var remainder = (cnt_goods_list.find("li.cnt_goods_item").length)%i; var page_count; if( $(this).siblings(".next").find("a").hasClass("next_unable")){ $(this).siblings(".next").find("a").removeClass("next_unable"); } if( remainder == 0 ){ page_count = page_temp; }else{ page_count = page_temp + 1; } if( !cnt_goods_list.is(":animated") ){ if(page == 1){ $(this).find("a").addClass("pre_unable"); }else{ page--; if( _hori ){ cnt_goods_list.animate({left:'+='+cgb_width},'slow'); }else{ cnt_goods_list.animate({top:'+='+cgb_height},'slow'); } } } }); $(_pre).trigger("click"); } })
调用方式：
$.picScroll('.picSilde_style');