看看线上效果http://stopic.okhqb.com/guohuo.html?ad=gcsj
使用jquery去做一个图片左右滑动的效果，
首先，我们要考虑一下几点：
1.处理向前的按钮；
2.处理向后的按钮；
3.处理，向前和向后出现临界值的情况；
4.处理每次滑动的width;
5.滑动的时候鼠标效果的切换;
6.页面中有多个滑动效果怎么办？
实现第一步，写好html
<!--S cnt_goods2--> <div class="cnt_goods cnt_goods2 fl"> <img src="http://resource.okhqb.com/misc/spguohuo/images/cnt_tt_bg3.jpg" /> <div class="cnt_goods_wrap cfix picSilde_style2_1"> <div class="tetui_pro fl"> <a href="http://www.okhqb.com/item/1000097403.html" title="A199" target="_blank"><img src="http://resource.okhqb.com/activity/16/24/162415d0b442ce8346acabafeabc04a5.jpg" alt="A199" /></a> </div> <div class="cnt_goods_box w794"> <ul class="cnt_goods_list fl cfix cnt_border" > <li class="cnt_goods_item"> <div class="list_item"> <div class="pro_img"> <a href="http://www.okhqb.com/item/1000096799.html" title="ZTE/中兴 N818" target="_blank"> <img src="http://resource.okhqb.com/thumbs/product/64/08/640839c73d0c0dfcfcc2173a951e8d5e.170.jpg" /> </a> </div> <div class="zeng_box"> <span class="zeng_icon"></span> <div class="zeng_wrap r45"> <ul class="zeng_list cfix fl"> <li class="zeng_list_item"> <a class="zeng_pro_img" href="javascript:void(0);" target="_blank"><img src="http://resource.okhqb.com/thumbs/product/be/55/be55ea5e4be4915389f4175ee0c5a5d0.24.jpg" /></a> <a class="zeng_pro_tt" href="javascript:void(0);" target="_blank">亮洁 LJ-W2 30片装 迷你清洁湿巾…</a> <span class="zeng_danjia">¥10</span> <span> X1</span> </li> </ul> <div class="guohuo_icon zeng_arrow fl"></div> </div> </div> <div class="maidian"> <span class="maidian_01" index="maidian_01"><img src="http://resource.okhqb.com/misc/spguohuo/images/maidian_01.jpg" /></span> <span class="maidian_02" index="maidian_02"><img src="http://resource.okhqb.com/misc/spguohuo/images/maidian_02.jpg" /></span> <span class="maidian_03" index="maidian_03"><img src="http://resource.okhqb.com/misc/spguohuo/images/maidian_03.jpg" /></span> <span class="maidian_04" index="maidian_04"><img src="http://resource.okhqb.com/misc/spguohuo/images/maidian_04.jpg" /></span> <p class="maidian_01 maidian_font">屏幕尺寸：4.5英寸</p> <p class="maidian_02 maidian_font">处理器：四核1.2GHz</p> <p class="maidian_03 maidian_font">摄像头像素：30万+500万</p> <p class="maidian_04 maidian_font">网络制式：电信3G</p> </div> <div class="pro_info"> <p class="pro_tt"><a href="http://www.okhqb.com/item/1000096799.html" title="ZTE/中兴 N818" target="_blank">ZTE/中兴 N818<span> 四核1.2GHz处理器,4.5英寸 500万摄像头</span></a></p> <p class="yuanjia">原价:¥<span>999</span></p> <div class="ok_pri"><div class="pingjia fr"><a href="http://www.okhqb.com/item/1000096799.html#menu_tab2" target="_blank">已评论:276条</a></div>¥ <span>780</span> </div> </div> </div> <div class="ftr_icon f_tj"></div> </li> </ul> </div> <div class="" style="clear:both"></div> <div class="pre"><a href="javascript:void(0);"></a></div><div class="next"><a href="javascript:void(0);"></a></div> </div> </div> <!--E cnt_goods2-->
2详细讲解下js
2.1向前按钮的处理
$(_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 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;//li标签的长度对于页面个数求余，判断页面数量是否加1
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{
//在小于页面总量时，点击进行滑动
cnt_goods_list.animate({left:'-='+cgb_width},'slow');
page++;
}
}
});
2.3 向后按钮的处理
基本思想一致
就在滑动时候不同
if( !cnt_goods_list.is(":animated") ){
if(page == page_count){
$(this).find("a").addClass("next_unable");
}else{
cnt_goods_list.animate({left:'-='+cgb_width},'slow');
page++;
} }
2.4如何在页面中实现多个调用呢
$(document).ready(function(e) {
$.focus(".picSilde_style1","4");//i为每页的产品个数，
$.focus(".picSilde_style6","5");
$.focus(".picSilde_style7","5");
$.focus(".picSilde_style2","1");
});
页面多个调用 ，写成函数调用，但是在传dom节点的时候，注意 要以不同的class调用， 不然会出现page参数混乱的情况，
2.5.处理每次滑动的width;
//每次滑动的width var cgb_width = cnt_goods_box.width();
总结：这次在这个运用中，实现函数调用，滑动的width可控制。
