jquery实现图片左右滑动。

看看线上效果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可控制。