Jquery的三輪播效果

今天研究下Jquery的三輪播效果 寫了一個簡單的出來 如今尚未用組件封裝 我今天這個輪播是向上的 一直向上的 原本是想研究個組件出來 想寫兩個函數 一個函數是向上滾動 另外一個是向左滾動 當我調用第一個函數時候 讓他向上 同理 當我調用第二個函數時候 讓他向左滾動 可是因爲待會想看看電視 如今就沒有封裝 之後有機會再封裝下吧 恩 今天這個Jquery寫的效果也是蠻簡單的 廢話很少說 看看下面效果圖:javascript

 這樣的效果也是看得不少 其實原理很簡單 HTML結構和CSS代碼也是很是重要的 由於我是用了 ul li這樣的標籤寫的 而我剛開始沒有用display:inline這樣的 在IE6 7下是有問題的 很納悶 而後再仔細看看源碼 才發現 少了這個!css

下面HTML代碼html

 

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.         <title>Untitled Document</title> 
  6. <style type="text/css"> 
  7. body,div,ul,li{ margin:0; padding:0;}  
  8. .container{ width:400px; height:300px; overflow:hidden; position:relative; margin:50px auto 0;}  
  9. .slider{ position:absolute;}  
  10. .slider li{ list-style:none; width:400px; height:300px; overflow:hidden; display:inline;}  
  11. .slider img{ width:400px; height:300px; overflow:hidden; border:none; display: block;}  
  12. .slider li a{ width:400px; height:300px; overflow:hidden; display:block;}  
  13. .num{ position:absolute; right:5px; bottom:5px; z-index:100;}  
  14. .num li{ float:left; color:#FF7300; height:16px; display:inline; line-height:16px; text-align:center; font-size:12px; font-family:Verdana, Geneva, sans-serif; overflow:hidden; margin:3px 1px; background-color:#fff; border:1px solid #FF7300; cursor:pointer; width:16px;}  
  15. .num li.on{ color:#fff; width:21px; height:21px; line-height:21px; font-size:16px; margin:0 1px; border:0; background:#FF7300; font-weight:700;}  
  16. </style> 
  17.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
  18.       
  19.     </head> 
  20.     <body> 
  21.         <div class="container"> 
  22.             <ul class="slider"> 
  23.                 <li><a href="#" target="_blank"><img  src="p_w_picpaths/01.jpg" alt=""/></a></li> 
  24.                 <li><a href="#" target="_blank"><img  src="p_w_picpaths/02.jpg" alt=""/></a></li> 
  25.                 <li><a href="#" target="_blank"><img  src="p_w_picpaths/03.jpg" alt=""/></a></li> 
  26.                 <li><a href="#" target="_blank"><img  src="p_w_picpaths/03.jpg" alt=""/></a></li> 
  27.             </ul> 
  28.             <ul class="num"> 
  29.                 <li>1</li> 
  30.                 <li>2</li> 
  31.                 <li>3</li> 
  32.                 <li>4</li> 
  33.             </ul> 
  34.         </div> 
  35.           
  36.         <script type="text/javascript" src="JqueryMarquee.js"></script> 
  37.     </body> 
  38. </html> 

JS代碼:java

 

  
  
  
  
  1. /**  
  2.  * @author tugenhua  
  3.  * @email tugenhua@126.com  
  4.  * Jquery三輪播圖片效果  
  5.  */ 
  6. $(function(){  
  7.     $(".num li:first").addClass("on");  
  8.     var len = $(".num li").length,  
  9.         index = 0,  
  10.         timer = null;  
  11.         $(".num li").mouseover(function(){  
  12.             var index = $(".num li").index(this);  
  13.             showImg(index);  
  14.         });  
  15.         $(".container").hover(function(){  
  16.             clearInterval(timer);  
  17.         },function(){  
  18.             timer = setInterval(function(){  
  19.                 showImg(index);  
  20.                 index++;  
  21.                 if(index==len) index=0;  
  22.             },3000);  
  23.         }).trigger("mouseleave");  
  24. })  
  25. function showImg(index){  
  26.     var addHeight = $(".container").height();  
  27.     $(".slider").stop(true,false).animate({top : -addHeight*index},1000);  
  28.     $(".num li").removeClass("on")  
  29.     .eq(index).addClass("on");        
  30. }  

首先寫這個結構時候 要注意下面幾個問題:jquery

1 用了ul li時候 必定要記得用display:inline這個ajax

2 我在寫樣式時用了個技巧  就是讓滾動的圖片的外框也就是父級元素 給他個絕對定位,目的是讓全部的圖片重疊在一塊兒 這樣就能夠實現一張一張的輪播。api

3 固然給了一個當前的類 當播放到那個li時候 讓他變寬!文字變色等等!!ide

4 js 就是說窗口一打開時候 讓他當前播放在第一個 因此用了這句代碼:$(".num li:first").addClass("on"); 而後獲取當前的數字 1 2 3 4的數量 定義當前的索引index 當我鼠標移到任何一個li時候 我想獲取當前的索引 用這個 showImg(index) 調用外面的函數 在這個函數內 首先要知道這個圖片的外框的高度 接着就讓他動畫 高度×當前的索引!函數

5.當我鼠標停在那一整塊的時候 我想讓他正在播放停下來,當我鼠標移開那一塊的時候 讓它觸發一個離開事件,判斷若是當前的index大於或者等於數字的最大長度時候 讓index返回第一張圖!動畫

下面添加個附件 不明白的地方 能夠下載看看 看看代碼 看看效果 理解下 就明白了 兼容IE6 7 8 火狐 谷歌等待主流遊覽器!!

相關文章
相關標籤/搜索