圖片左右滑動整理爲插件

時間 2019-11-24

標籤圖片左右滑動整理插件简体版

原文原文鏈接

在作web前端開發中，圖片左右滑動的功能很是經常使用。在本身的改進下，這款插件支持css

1.滑動方向的控制，上下滑動，左右滑動。html

2.可隨意改變滑動的區域大小前端

3.滑動中的樣式均可以自定義。web

4.兼容性良好，moz，ie，webkitide

5.對滑動加入延遲加載this

6.支持頁面中的多處調用url

如下是代碼解析：spa

下看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文件類容code

.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");     
   }
})