图片左右滑动整理为插件

/*参数

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>

.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{ }

$.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‘);