今天研究下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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/01.jpg" alt=""/></a></li> <li><a href="#" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/02.jpg" alt=""/></a></li> <li><a href="#" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/03.jpg" alt=""/></a></li> <li><a href="#" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 火狐 谷歌等待主流游览器！！
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦