jQuery实现轮播效果及stop()和is(:animated)的用法区别
2017-10-11 21:43
471 查看
对《锋利的jQuery》中的案例进行了改编和自创。
本项目总结出以下知识点和技巧:
一、轮播图的编程逻辑
滚动式:
1. mouseenter/mouseover移动
(1) 获得鼠标移到的tab序号
(2) 获得当前高亮的tab序号(利用filter(":has(.chos)")筛选和index()方法获得序号)计算出即将展示图片的位置,计算出移动时间
获得当前高亮的tab序号主要是为了计算图片切换的相对移动距离,距离越长,移动时间就应越长。但最后经效果测试,每次图片切换的时间都设为一个固定值(除了n-0是0s),例如图0-图1、图1-图3、图5-图2都移动3000ms,效果最好,所以这一步可以省略。
(3) 使用animate()方法将图片移动到目标位置。
2. 自动播放
hover绑定事件:鼠标mouseenter至展示区时停止自动播放,鼠标mouseleave时执行自动播放
(1) 获得当前高亮的tab序号(利用filter(":has(.chos)")筛选和index()方法获得序号。需要实时获取当前页,因为有可能之前是手动mouseover指向了某一页。
(2) 下一序号是+1,计算出即将展示图片的位置
(3) 使用animate()方法将图片移动到目标位置。
(4) 使用setInterval()实现自动播放。
淡入淡出式:
与滚动式基本相同,只是展示图片时使用fadeIn()和fadeOut()
二、关于停止动画stop()命令和判断是否处于动画状态is(:animated)
如果鼠标快速来回切换,由于tab高亮与图片对应,每次鼠标移动到某个tab必须保证图片也切换到对应的位置,所以即使元素当前在移动,也要stop之,因此不能用is(:animated)作为再次移动的前提条件。
总结起来:
当触发事件的元素(按钮)与动画元素在效果上存在一一对应关系,用stop()不能用is(:animated)
当触发事件的元素(按钮)与动画元素不存在对应,优先用is(:animated),也可增加用stop()
滚动方式轮播,
判断图片是否处于动画状态:is(:animated)
如果鼠标快速来回切换,由于tab高亮与图片对应,每次鼠标移动到某个tab必须保证图片也切换到对应的位置,所以即使元素当前在移动,也要stop之,因此不能用is(:animated)作为再次移动的前提条件
如果是单击一个按钮进行切换,为避免动画积累用is(:animated)判定
停止动画stop用法
如果图片只移动了一部分,鼠标就转换tab再移动到另一张时:
1. 用stop(true): 不会直接到达当前图片的末状态位置,移动到下一张的距离短,移动时间恒定,看上去就会显得很慢,影响用户体验。 适合于切换时间短的。
2. 用stop(true,true): 会直接到达当前图片的末状态位置,适合于切换时间长的,但移到末状态会有突然一闪的效果
三、在通过tab获得图片序号时,index()不带参数写法:$('#bar').index()是返回集合中第一个元素相对于其同辈元素的位置,元素a嵌套在每个列表项li之下,a集合没有同辈元素,所以要通过其父元素li获得。
<!DOCTYPE HTML>
<html>
<head>
<meta charset = utf-8 />
<title>slideShow</title>
<link type = "text/css" rel = "stylesheet" href="index.css" />
<script type = "text/javascript" src = "jquery.js"></script>
</head>
<body>
<!--幻灯展示区开始-->
<div id = "slideShow">
<div id = "showPic">
<ul>
<li><a href = "javascript:void(0);" title = "adidas"><img src = "images/ads/1.jpg" alt = "adidas"></a></li>
<li><a href = "javascript:void(0);" title = "valentime"><img src = "images/ads/2.jpg" alt = "valentime"></a></li>
<li><a href = "javascript:void(0);" title = "birds"><img src = "images/ads/3.jpg" alt = "birds"></a></li>
<li><a href = "javascript:void(0);" title = "high_heeled"><img src = "images/ads/4.jpg" alt = "high_heeled"></a></li>
<li><a href = "javascript:void(0);" title = "high_heeled"><img src = "images/ads/5.jpg" alt = "high_heeled"></a></li>
</ul>
</div>
<div class = "tab">
<ul>
<li><a href="javascript:void(0);" class = "chos">相约情人节<br />全场119元起</a></li>
<li><a href="javascript:void(0);">新款上线<br />全场357元起</a></li>
<li><a href="javascript:void(0);">愤怒小鸟特卖<br />全场89元起</a></li>
<li><a href="javascript:void(0);">高跟鞋促销<br />全场3.1折起</a></li>
<li class = "last"><a href="javascript:void(0);">梦想运动鞋<br />全场5.5折起</a></li>
</ul>
</div>
</div>
<!--幻灯展示区结束-->
<script type="text/javascript" src = "scripts/slideShow.js"></script>
</body>
</html>
本项目总结出以下知识点和技巧:
一、轮播图的编程逻辑
滚动式:
1. mouseenter/mouseover移动
(1) 获得鼠标移到的tab序号
(2) 获得当前高亮的tab序号(利用filter(":has(.chos)")筛选和index()方法获得序号)计算出即将展示图片的位置,计算出移动时间
获得当前高亮的tab序号主要是为了计算图片切换的相对移动距离,距离越长,移动时间就应越长。但最后经效果测试,每次图片切换的时间都设为一个固定值(除了n-0是0s),例如图0-图1、图1-图3、图5-图2都移动3000ms,效果最好,所以这一步可以省略。
(3) 使用animate()方法将图片移动到目标位置。
2. 自动播放
hover绑定事件:鼠标mouseenter至展示区时停止自动播放,鼠标mouseleave时执行自动播放
(1) 获得当前高亮的tab序号(利用filter(":has(.chos)")筛选和index()方法获得序号。需要实时获取当前页,因为有可能之前是手动mouseover指向了某一页。
(2) 下一序号是+1,计算出即将展示图片的位置
(3) 使用animate()方法将图片移动到目标位置。
(4) 使用setInterval()实现自动播放。
淡入淡出式:
与滚动式基本相同,只是展示图片时使用fadeIn()和fadeOut()
二、关于停止动画stop()命令和判断是否处于动画状态is(:animated)
如果鼠标快速来回切换,由于tab高亮与图片对应,每次鼠标移动到某个tab必须保证图片也切换到对应的位置,所以即使元素当前在移动,也要stop之,因此不能用is(:animated)作为再次移动的前提条件。
总结起来:
当触发事件的元素(按钮)与动画元素在效果上存在一一对应关系,用stop()不能用is(:animated)
当触发事件的元素(按钮)与动画元素不存在对应,优先用is(:animated),也可增加用stop()
滚动方式轮播,
判断图片是否处于动画状态:is(:animated)
如果鼠标快速来回切换,由于tab高亮与图片对应,每次鼠标移动到某个tab必须保证图片也切换到对应的位置,所以即使元素当前在移动,也要stop之,因此不能用is(:animated)作为再次移动的前提条件
如果是单击一个按钮进行切换,为避免动画积累用is(:animated)判定
停止动画stop用法
如果图片只移动了一部分,鼠标就转换tab再移动到另一张时:
1. 用stop(true): 不会直接到达当前图片的末状态位置,移动到下一张的距离短,移动时间恒定,看上去就会显得很慢,影响用户体验。 适合于切换时间短的。
2. 用stop(true,true): 会直接到达当前图片的末状态位置,适合于切换时间长的,但移到末状态会有突然一闪的效果
三、在通过tab获得图片序号时,index()不带参数写法:$('#bar').index()是返回集合中第一个元素相对于其同辈元素的位置,元素a嵌套在每个列表项li之下,a集合没有同辈元素,所以要通过其父元素li获得。
<!DOCTYPE HTML>
<html>
<head>
<meta charset = utf-8 />
<title>slideShow</title>
<link type = "text/css" rel = "stylesheet" href="index.css" />
<script type = "text/javascript" src = "jquery.js"></script>
</head>
<body>
<!--幻灯展示区开始-->
<div id = "slideShow">
<div id = "showPic">
<ul>
<li><a href = "javascript:void(0);" title = "adidas"><img src = "images/ads/1.jpg" alt = "adidas"></a></li>
<li><a href = "javascript:void(0);" title = "valentime"><img src = "images/ads/2.jpg" alt = "valentime"></a></li>
<li><a href = "javascript:void(0);" title = "birds"><img src = "images/ads/3.jpg" alt = "birds"></a></li>
<li><a href = "javascript:void(0);" title = "high_heeled"><img src = "images/ads/4.jpg" alt = "high_heeled"></a></li>
<li><a href = "javascript:void(0);" title = "high_heeled"><img src = "images/ads/5.jpg" alt = "high_heeled"></a></li>
</ul>
</div>
<div class = "tab">
<ul>
<li><a href="javascript:void(0);" class = "chos">相约情人节<br />全场119元起</a></li>
<li><a href="javascript:void(0);">新款上线<br />全场357元起</a></li>
<li><a href="javascript:void(0);">愤怒小鸟特卖<br />全场89元起</a></li>
<li><a href="javascript:void(0);">高跟鞋促销<br />全场3.1折起</a></li>
<li class = "last"><a href="javascript:void(0);">梦想运动鞋<br />全场5.5折起</a></li>
</ul>
</div>
</div>
<!--幻灯展示区结束-->
<script type="text/javascript" src = "scripts/slideShow.js"></script>
</body>
</html>
/* @group general style ………………………………………………………*/ *{ margin:0; padding:0; } body{ font:12px/1.5 Verdana, Geneva, Arial, "宋体", Sans-seri b840 f; } ul,ol,li{ list-style-type:none; } a{ text-decoration: none; } a:hover{ text-decoration: underline; } a:link{ color:#000; } a>img{ display: block; } /*part1 slideShow*/ #slideShow { height: 321px; position: relative; } /*part1-1 showPic*/ #showPic { width: 550px; height:100%; position: relative; overflow: hidden; } #showPic ul{ width: 2750px; position: absolute; } #showPic ul li{ float: left; } #slideShow .tab{ position: absolute; overflow: hidden; left:0; bottom: 0; } #slideShow .tab li{ float: left; width: 108px; margin-right:2px; text-align:center; font: 14px/1.5 Arial; color: #FFF; } #slideShow .tab .last{ width:110px; margin:0; } #slideShow .tab a{ display:block; padding: 5px 10px; color: #FFF; background:#625D5D; opacity: 0.7; } #slideShow .tab a:hover{ text-decoration: none; } .chos { background: #37A7D7 url(../images/adindex.gif) no-repeat center bottom!important; }
//轮播效果 $(function() { //这里都是$函数内的变量,相当于全局变量 var $tabLinks = $("#slideShow .tab a"); var $picUl = $("#showPic ul"); //单张宽度和选项卡数量 var singleWidth = $("#showPic").width(); var len = $tabLinks.length; //计时器 var adTimer = null; //初始化页码 var pre_index = 0; var next_index = 0; //初始化tab高亮 $tabLinks.eq(0).css("opacity", "1"); //移动到某项 $("#slideShow .tab").on('mouseover', 'a', function() { //实时获取目标页和之前页 next_index = $tabLinks.index(this); //注意filter内的选择器,是a中含有.chos //获取pre_index: index()不带参数写法是返回集合中第一个元素相对于其!同辈!元素的位置,a没有同辈元素 pre_index = $tabLinks.parent().filter(":has(.chos)").index(); //或者:pre_index = $tabLinks.filter(".chos").index($tabLinks); rollShow(next_index, pre_index); //fadeShow(next_index, pre_index); }); //自动播放 $("#slideShow").hover(function() { //鼠标进入slideShow停止动画 if(adTimer) { clearInterval(adTimer); } }, function() { adTimer = setInterval(function() { //也是实时获取获取目标页和之前页,因为有可能之前是手动mouseover指向了某一页 pre_index = $tabLinks.parent().filter(":has(.chos)").index(); //或者:pre_index = $tabLinks.filter(".chos").index($tabLinks); //next与pre相差1 next_index = (pre_index === len-1)?0:pre_index + 1; rollShow(next_index, pre_index); //fadeShow(next_index, pre_index); }, 3000); }).trigger("mouseleave"); //滚动显示不同的幻灯片,如果每次图片切换的时间time一样,函数就可以不需要pre_index! function rollShow(next_index, pre_index) { //之前是通过当前图片位置得到之前页码 /* var current_pos = $picUl.position(); var left = current_pos.left; if(left === 0) { pre_index = 0; } else { pre_index = (-left)/singleWidth; }*/ //移动之后的位置 var new_pos = -(singleWidth * next_index); //移动的时长 if(next_index === 0 && pre_index === len-1) { var time = 0; } else { // time = Math.abs(next_index - pre_index) * 400; // 都用同一时长,效果更好。 time = 400; } //1. 选项卡高亮和变淡 $tabLinks.removeClass("chos").css("opacity", "0.7") .eq(next_index).addClass("chos").css("opacity", "1"); //2. 轮播 //如果鼠标快速来回切换,由于tab高亮与图片对应,每次鼠标移动到某个tab必须保证图片也切换到对应的位置, //所以即使元素当前在移动,也要stop之,因此不能用is(:animated)作为再次移动的前提条件 //如果是单击一个按钮进行切换,为避免动画积累用is(:animated)判定 //if(!$picUl.is(":animated")) { //不需要检查动画 // 如果图片只移动了一部分,鼠标就转换tab再移动到另一张时: // 1. 用stop(true): 不会直接到达当前图片的末状态位置,移动到下一张的距离短,移动时间恒定, // 看上去就会显得很慢,影响用户体验。 适合于切换时间短的。 // 2. 用stop(true,true): 会直接到达当前图片的末状态位置,适合于切换时间长的, // 但移到末状态会有突然一闪的效果 $picUl.stop(true,true).animate({left: "" + new_pos}, time); //} } //淡入淡出显示不同的幻灯片 function fadeShow(next_index) { //1. 选项卡高亮和变淡 $tabLinks.removeClass("chos").css("opacity", "0.7") .eq(next_index).addClass("chos").css("opacity", "1"); $picUl.find('li').eq(next_index).stop(true,true).fadeIn(300).siblings().fadeOut(300); } });
相关文章推荐
- JQuery实现图片轮播效果
- 基于JQuery的实现图片轮播效果(焦点图)
- jQuery实现图片轮播效果,jQuery实现焦点新闻
- jquery实现图片轮播效果
- jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)
- [转]JQuery实现图片轮播效果
- JQuery实现图片轮播切换效果--水平切换/垂直切换
- JQuery实现banner图片的轮播效果
- jQuery实现仿路边灯箱广告图片轮播效果
- jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)
- 原生js和jquery实现图片轮播淡入淡出效果
- jquery实现图片轮播效果
- 使用Jquery实现图片轮播效果
- [转]jQuery实现图片轮播效果,jQuery实现焦点新闻
- jquery实现jQuery实现图片轮播效果,jQuery实现焦点新闻
- jquery实现轮播图效果
- jquery的ajax效果最简单实现 及innerhtml()和innertext()的区别
- jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)
- 基于JQuery的实现图片轮播效果(焦点图)
- JQuery实现图片轮播效果