Jquery的三轮播效果-原创手记-慕课网

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

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

下面HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">         <title>Untitled Document</title> <style type="text/css"> body,div,ul,li{ margin:0; padding:0;}  .container{ width:400px; height:300px; overflow:hidden; position:relative; margin:50px auto 0;}  .slider{ position:absolute;}  .slider li{ list-style:none; width:400px; height:300px; overflow:hidden; display:inline;}  .slider img{ width:400px; height:300px; overflow:hidden; border:none; display: block;}  .slider li a{ width:400px; height:300px; overflow:hidden; display:block;}  .num{ position:absolute; right:5px; bottom:5px; z-index:100;}  .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;}  .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;}  </style>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>           </head>     <body>         <div class="container">             <ul class="slider">                 <li><a href="#" target="_blank"><img  src="images/01.jpg" alt=""/></a></li>                 <li><a href="#" target="_blank"><img  src="images/02.jpg" alt=""/></a></li>                 <li><a href="#" target="_blank"><img  src="images/03.jpg" alt=""/></a></li>                 <li><a href="#" target="_blank"><img  src="images/03.jpg" alt=""/></a></li>             </ul>             <ul class="num">                 <li>1</li>                 <li>2</li>                 <li>3</li>                 <li>4</li>             </ul>         </div>                   <script type="text/javascript" src="JqueryMarquee.js"></script>     </body> </html>

JS代码：

/**   * @author tugenhua   * @email tugenhua@126.com   * Jquery三轮播图片效果   */ $(function(){      $(".num li:first").addClass("on");      var len = $(".num li").length,          index = 0,          timer = null;          $(".num li").mouseover(function(){              var index = $(".num li").index(this);              showImg(index);          });          $(".container").hover(function(){              clearInterval(timer);          },function(){              timer = setInterval(function(){                  showImg(index);                  index++;                  if(index==len) index=0;              },3000);          }).trigger("mouseleave");  })  function showImg(index){      var addHeight = $(".container").height();      $(".slider").stop(true,false).animate({top : -addHeight*index},1000);      $(".num li").removeClass("on")      .eq(index).addClass("on");        }

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

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