腾讯qq飞车手游兑换码大全:非常漂亮的一款jQuery橫向帶箭頭左右滾動效果

非常漂亮的一款jQuery橫向帶箭頭左右滾動效果
 點擊預覽  點擊下載

qq飞车手游怎么拉黑 www.kwigj.icu 本款JQuery左右滾動代碼很漂亮,帶左右箭頭,點擊箭頭可以向左或者向右滾動一屏,一屏4張圖片。當然,有能力的話你可以修改數量。

html代碼:

  1. <div class="box" style="margin-top:50px;"> 
  2.     <div class="picbox"> 
  3.         <ul class="piclist mainlist"> 
  4.             <li><a href="#" target="_blank"><img src="images/1.jpg" width="220" height="105" /></a></li> 
  5.             <li><a href="#" target="_blank"><img src="images/2.jpg" /></a></li> 
  6.             <li><a href="#" target="_blank"><img src="images/3.jpg" /></a></li> 
  7.             <li><a href="#" target="_blank"><img src="images/4.jpg" /></a></li> 
  8.             <li><a href="#" target="_blank"><img src="images/1.jpg" /></a></li> 
  9.             <li><a href="#" target="_blank"><img src="images/2.jpg" /></a></li> 
  10.             <li><a href="#" target="_blank"><img src="images/3.jpg" /></a></li> 
  11.             <li><a href="#" target="_blank"><img src="images/4.jpg" /></a></li> 
  12.         </ul> 
  13.         <ul class="piclist swaplist"></ul> 
  14.     </div> 
  15.     <div class="og_prev"></div> 
  16.     <div class="og_next"></div> 
  17. </div> 

JQuery代碼:

  1. $(document).ready(function(e) { 
  2.     /***不需要自動滾動,去掉即可***/ 
  3.     time = window.setInterval(function(){ 
  4.         $('.og_next').click();   
  5.     },5000); 
  6.     /***不需要自動滾動,去掉即可***/ 
  7.     linum = $('.mainlist li').length;//圖片數量 
  8.     w = linum * 250;//ul寬度 
  9.     $('.piclist').css('width', w + 'px');//ul寬度 
  10.     $('.swaplist').html($('.mainlist').html());//復制內容 
  11.      
  12.     $('.og_next').click(function(){ 
  13.          
  14.         if($('.swaplist,.mainlist').is(':animated')){ 
  15.             $('.swaplist,.mainlist').stop(true,true); 
  16.         } 
  17.          
  18.         if($('.mainlist li').length>4){//多于4張圖片 
  19.             ml = parseInt($('.mainlist').css('left'));//默認圖片ul位置 
  20.             sl = parseInt($('.swaplist').css('left'));//交換圖片ul位置 
  21.             if(ml<=0 && ml>w*-1){//默認圖片顯示時 
  22.                 $('.swaplist').css({left: '1000px'});//交換圖片放在顯示區域右側 
  23.                 $('.mainlist').animate({left: ml - 1000 + 'px'},'slow');//默認圖片滾動                 
  24.                 if(ml==(w-1000)*-1){//默認圖片最后一屏時 
  25.                     $('.swaplist').animate({left: '0px'},'slow');//交換圖片滾動 
  26.                 } 
  27.             }else{//交換圖片顯示時 
  28.                 $('.mainlist').css({left: '1000px'})//默認圖片放在顯示區域右 
  29.                 $('.swaplist').animate({left: sl - 1000 + 'px'},'slow');//交換圖片滾動 
  30.                 if(sl==(w-1000)*-1){//交換圖片最后一屏時 
  31.                     $('.mainlist').animate({left: '0px'},'slow');//默認圖片滾動 
  32.                 } 
  33.             } 
  34.         } 
  35.     }) 
  36.     $('.og_prev').click(function(){ 
  37.          
  38.         if($('.swaplist,.mainlist').is(':animated')){ 
  39.             $('.swaplist,.mainlist').stop(true,true); 
  40.         } 
  41.          
  42.         if($('.mainlist li').length>4){ 
  43.             ml = parseInt($('.mainlist').css('left')); 
  44.             sl = parseInt($('.swaplist').css('left')); 
  45.             if(ml<=0 && ml>w*-1){ 
  46.                 $('.swaplist').css({left: w * -1 + 'px'}); 
  47.                 $('.mainlist').animate({left: ml + 1000 + 'px'},'slow');                 
  48.                 if(ml==0){ 
  49.                     $('.swaplist').animate({left: (w - 1000) * -1 + 'px'},'slow'); 
  50.                 } 
  51.             }else
  52.                 $('.mainlist').css({left: (w - 1000) * -1 + 'px'}); 
  53.                 $('.swaplist').animate({left: sl + 1000 + 'px'},'slow'); 
  54.                 if(sl==0){ 
  55.                     $('.mainlist').animate({left: '0px'},'slow'); 
  56.                 } 
  57.             } 
  58.         } 
  59.     })     
  60. }); 
  61.  
  62. $(document).ready(function(){ 
  63.     $('.og_prev,.og_next').hover(function(){ 
  64.             $(this).fadeTo('fast',1); 
  65.         },function(){ 
  66.             $(this).fadeTo('fast',0.7); 
  67.     }) 
  68.  
  69. }) 

轉載請注明:qq飞车手游怎么拉黑 ? 非常漂亮的一款jQuery橫向帶箭頭左右滾動效果

評論列表(網友評論僅供網友表達個人看法,并不表明本站同意其觀點或證實其描述)