这篇博客介绍了如何使用jQuery实现滚动和淡入淡出式的轮播效果，强调了stop()方法和is(:animated)选择器在控制动画过程中的作用。在快速切换时，即使元素正在动画中，也需要使用stop()来立即停止动画，以确保图片与tab的对应。同时，文章探讨了stop()的两种参数设置对用户体验的影响，并提供了通过tab获取图片序号的技巧。
对《锋利的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>
/* @group general style ………………………………………………………*/
*{
margin:0; padding:0;
}
body{
font:12px/1.5 Verdana, Geneva, Arial, "宋体", Sans-serif;
}
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);
}
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
