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

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. <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代码：

 

  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. }  

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

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 火狐 谷歌等待主流游览器！！