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