今天研究下Jquery的三轮播效果 写了一个简单的出来 现在还没有用组件封装 我今天这个轮播是向上的 一直向上的 本来是想研究个组件出来 想写两个函数 一个函数是向上滚动 另一个是向左滚动 当我调用第一个函数时候 让他向上 同理 当我调用第二个函数时候 让他向左滚动 但是由于待会想看看电视 现在就没有封装 以后有机会再封装下吧 恩 今天这个Jquery写的效果也是蛮简单的 废话不多说 看看下面效果图：

 这样的效果也是看得很多 其实原理很简单 HTML结构和CSS代码也是非常重要的 因为我是用了 ul li这样的标签写的 而我刚开始没有用display：inline这样的 在IE6 7下是有问题的 很纳闷 然后再仔细看看源码 才发现 少了这个！

下面HTML代码

 


    
    
    

     
     
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    2. 

     
     
  2. <html> 
    3. 

     
     
  3.     <head> 
    4. 

     
     
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    5. 

     
     
  5.         <title>Untitled Document</title> 
    6. 

     
     
  6. <style type="text/css"> 
    7. 

     
     
  7. body,div,ul,li{ margin:0; padding:0;}  
    8. 

     
     
  8. .container{ width:400px; height:300px; overflow:hidden; position:relative; margin:50px auto 0;}  
    9. 

     
     
  9. .slider{ position:absolute;}  
    10. 

     
     
  10. .slider li{ list-style:none; width:400px; height:300px; overflow:hidden; display:inline;}  
    11. 

     
     
  11. .slider img{ width:400px; height:300px; overflow:hidden; border:none; display: block;}  
    12. 

     
     
  12. .slider li a{ width:400px; height:300px; overflow:hidden; display:block;}  
    13. 

     
     
  13. .num{ position:absolute; right:5px; bottom:5px; z-index:100;}  
    14. 

     
     
  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. 

     
     
  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. 

     
     
  16. </style> 
    17. 

     
     
  17.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    18. 

     
     
  18.       
    19. 

     
     
  19.     </head> 
    20. 

     
     
  20.     <body> 
    21. 

     
     
  21.         <div class="container"> 
    22. 

     
     
  22.             <ul class="slider"> 
    23. 

     
     
  23.                 <li><a href="#" target="_blank"><img  src="images/01.jpg" alt=""/></a></li> 
    24. 

     
     
  24.                 <li><a href="#" target="_blank"><img  src="images/02.jpg" alt=""/></a></li> 
    25. 

     
     
  25.                 <li><a href="#" target="_blank"><img  src="images/03.jpg" alt=""/></a></li> 
    26. 

     
     
  26.                 <li><a href="#" target="_blank"><img  src="images/03.jpg" alt=""/></a></li> 
    27. 

     
     
  27.             </ul> 
    28. 

     
     
  28.             <ul class="num"> 
    29. 

     
     
  29.                 <li>1</li> 
    30. 

     
     
  30.                 <li>2</li> 
    31. 

     
     
  31.                 <li>3</li> 
    32. 

     
     
  32.                 <li>4</li> 
    33. 

     
     
  33.             </ul> 
    34. 

     
     
  34.         </div> 
    35. 

     
     
  35.           
    36. 

     
     
  36.         <script type="text/javascript" src="JqueryMarquee.js"></script> 
    37. 

     
     
  37.     </body> 
    38. 

     
     
  38. </html> 
    39.

JS代码：

 


    
    
    

     
     
  1. /**  
    2. 

     
     
  2.  * @author tugenhua  
    3. 

     
     
  3.  * @email tugenhua@126.com  
    4. 

     
     
  4.  * Jquery三轮播图片效果  
    5. 

     
     
  5.  */ 
    6. 

     
     
  6. $(function(){  
    7. 

     
     
  7.     $(".num li:first").addClass("on");  
    8. 

     
     
  8.     var len = $(".num li").length,  
    9. 

     
     
  9.         index = 0,  
    10. 

     
     
  10.         timer = null;  
    11. 

     
     
  11.         $(".num li").mouseover(function(){  
    12. 

     
     
  12.             var index = $(".num li").index(this);  
    13. 

     
     
  13.             showImg(index);  
    14. 

     
     
  14.         });  
    15. 

     
     
  15.         $(".container").hover(function(){  
    16. 

     
     
  16.             clearInterval(timer);  
    17. 

     
     
  17.         },function(){  
    18. 

     
     
  18.             timer = setInterval(function(){  
    19. 

     
     
  19.                 showImg(index);  
    20. 

     
     
  20.                 index++;  
    21. 

     
     
  21.                 if(index==len) index=0;  
    22. 

     
     
  22.             },3000);  
    23. 

     
     
  23.         }).trigger("mouseleave");  
    24. 

     
     
  24. })  
    25. 

     
     
  25. function showImg(index){  
    26. 

     
     
  26.     var addHeight = $(".container").height();  
    27. 

     
     
  27.     $(".slider").stop(true,false).animate({top : -addHeight*index},1000);  
    28. 

     
     
  28.     $(".num li").removeClass("on")  
    29. 

     
     
  29.     .eq(index).addClass("on");        
    30. 

     
     
  30. }  
    31.

首先写这个结构时候 要注意下面几个问题：

1 用了ul li时候 一定要记得用display：inline这个

2 我在写样式时用了个技巧  就是让滚动的图片的外框也就是父级元素 给他个绝对定位，目的是让所有的图片重叠在一起 这样就可以实现一张一张的轮播。

3 当然给了一个当前的类 当播放到那个li时候 让他变宽！文字变色等等！！

4 js 就是说窗口一打开时候 让他当前播放在第一个 所以用了这句代码：$(".num li:first").addClass("on"); 然后获取当前的数字 1 2 3 4的数量 定义当前的索引index 当我鼠标移到任何一个li时候 我想获取当前的索引 用这个 showImg(index) 调用外面的函数 在这个函数内 首先要知道这个图片的外框的高度 接着就让他动画 高度×当前的索引！

5.当我鼠标停在那一整块的时候 我想让他正在播放停下来，当我鼠标移开那一块的时候 让它触发一个离开事件，判断如果当前的index大于或者等于数字的最大长度时候 让index返回第一张图！

下面添加个附件 不明白的地方 可以下载看看 看看代码 看看效果 理解下 就明白了 兼容IE6 7 8 火狐 谷歌等待主流游览器！！