图片左右滑动整理为插件

在做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');

 

转载于:https://www.cnblogs.com/huanhuan8808/p/3677531.html