簡單三步建立超炫jQuery滑動代碼

時間  2020-08-29
標籤 簡單 三步 建立 jquery 滑動 代碼 欄目 JQuery 简体版
原文   原文鏈接

簡單三步建立超炫jQuery滑動代碼

網上有不少不少這樣的代碼，這個只是比較通用的一種。javascript

  • 自動獲取圖片數量，數字顯示
  • 支持鼠標懸停時中止滾動
  • 滾動圖片能夠設置跳轉連接

 

效果圖：css

示例圖片

第一步 —— 建立要顯示的HTML代碼以下：html

  
  
  
  
    
   
   
   
   
  1. <div class="folio_block"> 
    2. 
   
   
   
   
  2.          
    3. 
   
   
   
   
  3.         <div class="main_view"> 
    4. 
   
   
   
   
  4.             <div class="window">     
    5. 
   
   
   
   
  5.                 <div class="p_w_picpath_reel"> 
    6. 
   
   
   
   
  6.                     <a href="http://www.google.com/ncr"><img border="0" height="286" width="790"  src="reel_1.jpg" alt="111111111111111" /></a> 
    7. 
   
   
   
   
  7.                     <a href="http://www.google.com/ncr"><img border="0" height="286" width="790"  src="reel_2.jpg" alt="2222222222222" /></a> 
    8. 
   
   
   
   
  8.                     <a href="http://www.google.com/ncr"><img border="0" height="286" width="790"  src="reel_3.jpg" alt="aaaaaaaaaaaa" /></a> 
    9. 
   
   
   
   
  9.                     <a href="http://www.google.com/ncr"><img border="0" height="286" width="790"  src="reel_4.jpg" alt="zzzzzzzzz" /></a> 
    10. 
   
   
   
   
  10.                 </div> 
    11. 
   
   
   
   
  11.             </div> 
    12. 
   
   
   
   
  12.             <div class="paging"> 
    13. 
   
   
   
   
  13.                 <a href="#" rel="1">1</a> 
    14. 
   
   
   
   
  14.                 <a href="#" rel="2">2</a> 
    15. 
   
   
   
   
  15.                 <a href="#" rel="3">3</a> 
    16. 
   
   
   
   
  16.                 <a href="#" rel="4">4</a> 
    17. 
   
   
   
   
  17.             </div> 
    18. 
   
   
   
   
  18.         </div> 
    19. 
   
   
   
   
  19.     </div> 
    20. 
  
  
  
  
------------------------------------------------------------------------------------java
第二步 —— 設置樣式以下：jquery
   
   
   
   
    
    
    
    
    
  1. /*--Main Container--*/ 
    2. 
    
    
    
    
  2. .main_view { 
    3. 
    
    
    
    
  3.     float: left; 
    4. 
    
    
    
    
  4.     position: relative; 
    5. 
    
    
    
    
  5. } 
    6. 
    
    
    
    
  6. /*--Window/Masking Styles--*/ 
    7. 
    
    
    
    
  7. .window { 
    8. 
    
    
    
    
  8.     height:286px;   width: 790px; 
    9. 
    
    
    
    
  9.     overflow: hidden; /*--Hides anything outside of the set width/height--*/ 
    10. 
    
    
    
    
  10.     position: relative; 
    11. 
    
    
    
    
  11. } 
    12. 
    
    
    
    
  12. .p_w_picpath_reel { 
    13. 
    
    
    
    
  13.     position: absolute; 
    14. 
    
    
    
    
  14.     top: 0; left: 0; 
    15. 
    
    
    
    
  15. } 
    16. 
    
    
    
    
  16. .p_w_picpath_reel img {float: left;} 
    17. 
    
    
    
    
  17.  
    18. 
    
    
    
    
  18. /*--Paging Styles--*/ 
    19. 
    
    
    
    
  19. .paging { 
    20. 
    
    
    
    
  20.     position: absolute; 
    21. 
    
    
    
    
  21.     bottom: 40px; right: -7px; 
    22. 
    
    
    
    
  22.     width: 178px; height:47px; 
    23. 
    
    
    
    
  23.     z-index: 100; /*--Assures the paging stays on the top layer--*/ 
    24. 
    
    
    
    
  24.     text-align: center; 
    25. 
    
    
    
    
  25.     line-height: 40px; 
    26. 
    
    
    
    
  26.     background: url(http://www.sohtanaka.com/web-design/examples/p_w_picpath-slider/paging_bg2.png) no-repeat; 
    27. 
    
    
    
    
  27.     display: none; /*--Hidden by default, will be later shown with jQuery--*/ 
    28. 
    
    
    
    
  28. } 
    29. 
    
    
    
    
  29. .paging a { 
    30. 
    
    
    
    
  30.     padding: 5px; 
    31. 
    
    
    
    
  31.     text-decoration: none; 
    32. 
    
    
    
    
  32.     color: #cccccc; 
    33. 
    
    
    
    
  33. } 
    34. 
    
    
    
    
  34. .paging a.active { 
    35. 
    
    
    
    
  35.     color:green; 
    36. 
    
    
    
    
  36.     font-weight: bold; 
    37. 
    
    
    
    
  37.     border: 1px solid #610000; 
    38. 
    
    
    
    
  38.     -moz-border-radius: 3px; 
    39. 
    
    
    
    
  39.     -khtml-border-radius: 3px; 
    40. 
    
    
    
    
  40.     -webkit-border-radius: 3px; 
    41. 
    
    
    
    
  41. } 
    42. 
    
    
    
    
  42. .paging a:hover {font-weight: bold;} 
    43. 
   
   
   
   




====================================================================================web


第三步 —— 將如下腳本放入頁面：ajax


   
   
   
   
    
    
    
    
    
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    2. 
    
    
    
    
  2. <script type="text/javascript"> 
    3. 
    
    
    
    
  3.  
    4. 
    
    
    
    
  4. $(document).ready(function() { 
    5. 
    
    
    
    
  5.  
    6. 
    
    
    
    
  6.     //Set Default State of each portfolio piece 
    7. 
    
    
    
    
  7.     $(".paging").show(); 
    8. 
    
    
    
    
  8.     $(".paging a:first").addClass("active"); 
    9. 
    
    
    
    
  9.          
    10. 
    
    
    
    
  10.     //Get size of p_w_picpaths, how many there are, then determin the size of the p_w_picpath reel. 
    11. 
    
    
    
    
  11.     var p_w_picpathWidth = $(".window").width(); 
    12. 
    
    
    
    
  12.     var p_w_picpathSum = $(".p_w_picpath_reel img").size(); 
    13. 
    
    
    
    
  13.     var p_w_picpathReelWidth = p_w_picpathWidth * p_w_picpathSum; 
    14. 
    
    
    
    
  14.      
    15. 
    
    
    
    
  15.     //Adjust the p_w_picpath reel to its new size 
    16. 
    
    
    
    
  16.     $(".p_w_picpath_reel").css({'width' : p_w_picpathReelWidth}); 
    17. 
    
    
    
    
  17.      
    18. 
    
    
    
    
  18.     //Paging + Slider Function 
    19. 
    
    
    
    
  19.     rotate = function(){     
    20. 
    
    
    
    
  20.         var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
    21. 
    
    
    
    
  21.         var p_w_picpath_reelPosition = triggerID * p_w_picpathWidth; //Determines the distance the p_w_picpath reel needs to slide 
    22. 
    
    
    
    
  22.  
    23. 
    
    
    
    
  23.         $(".paging a").removeClass('active'); //Remove all active class 
    24. 
    
    
    
    
  24.         $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 
    25. 
    
    
    
    
  25.          
    26. 
    
    
    
    
  26.         //Slider Animation 
    27. 
    
    
    
    
  27.         $(".p_w_picpath_reel").animate({  
    28. 
    
    
    
    
  28.             left: -p_w_picpath_reelPosition 
    29. 
    
    
    
    
  29.         }, 500 ); 
    30. 
    
    
    
    
  30.          
    31. 
    
    
    
    
  31.     };  
    32. 
    
    
    
    
  32.      
    33. 
    
    
    
    
  33.     //Rotation + Timing Event 
    34. 
    
    
    
    
  34.     rotateSwitch = function(){       
    35. 
    
    
    
    
  35.         play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
    36. 
    
    
    
    
  36.             $active = $('.paging a.active').next(); 
    37. 
    
    
    
    
  37.             if ( $active.length === 0) { //If paging reaches the end... 
    38. 
    
    
    
    
  38.                 $active = $('.paging a:first'); //go back to first 
    39. 
    
    
    
    
  39.             } 
    40. 
    
    
    
    
  40.             rotate(); //Trigger the paging and slider function 
    41. 
    
    
    
    
  41.         }, 1000); //Timer speed in milliseconds (3 seconds) 
    42. 
    
    
    
    
  42.     }; 
    43. 
    
    
    
    
  43.      
    44. 
    
    
    
    
  44.     rotateSwitch(); //Run function on launch 
    45. 
    
    
    
    
  45.      
    46. 
    
    
    
    
  46.     //On Hover 
    47. 
    
    
    
    
  47.     $(".p_w_picpath_reel a").hover(function() { 
    48. 
    
    
    
    
  48.         clearInterval(play); //Stop the rotation 
    49. 
    
    
    
    
  49.     }, function() { 
    50. 
    
    
    
    
  50.         rotateSwitch(); //Resume rotation 
    51. 
    
    
    
    
  51.     });  
    52. 
    
    
    
    
  52.      
    53. 
    
    
    
    
  53.     //On Click 
    54. 
    
    
    
    
  54.     $(".paging a").click(function() {    
    55. 
    
    
    
    
  55.         $active = $(this); //Activate the clicked paging 
    56. 
    
    
    
    
  56.         //Reset Timer 
    57. 
    
    
    
    
  57.         clearInterval(play); //Stop the rotation 
    58. 
    
    
    
    
  58.         rotate(); //Trigger rotation immediately 
    59. 
    
    
    
    
  59.         rotateSwitch(); // Resume rotation 
    60. 
    
    
    
    
  60.         return false; //Prevent browser jump to link anchor 
    61. 
    
    
    
    
  61.     });  
    62. 
    
    
    
    
  62.      
    63. 
    
    
    
    
  63. }); 
    64. 
    
    
    
    
  64. </script> 
    65. 
   
   
   
   



示例地址：http://www.sohtanaka.com/web-design/examples/p_w_picpath-slider/
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程