本帖最后由 谷粒姐姐 于 2018-12-13 15:10 编辑
知识点预习01- 轮播图-获取相关元素[AppleScript] 纯文本查看 复制代码 var $slide = $('.slide'), // 轮播区域的div
$slideList = $('.slide_list'), // 轮播列表
$lis = $('.slide_list li'),// 轮播中的四个li
$prevBtn = $('.prev'), // 上一张按钮
$nextBtn = $('.next'), // 下一张按钮
$pointsList = $('.points');// 小圆点列表
2- 轮播图-添加小圆点
[AppleScript] 纯文本查看 复制代码 // [/size][/font]
[font=微软雅黑][size=3]1.根据图片张数动态添加小圆点
for (var i = 0; i < iPicCount; i++) {
$pointsList.append('<li></li>');
}
// 1.1 默认第0个小点高亮
$pointsList.children(':first').addClass('active');
轮播图-监听小圆点事件 - 下一张
[AppleScript] 纯文本查看 复制代码 //[/size][/font]
[font=微软雅黑][size=3] 2.动画前的准备除了第一张 其它 都放到760的位置
$lis.not(':first').css({ 'left': 760 });
var iNowIndex = 0; // 即将要上显示的这一张
var iPreviousIndex = 0; // 上一张,也是要让位置的这一张
// 2.1 点击小圆点进行图片移动动画
$pointsList.delegate('li', 'click', function () {
// 记录即将要显示的图片索引
iNowIndex = $(this).index();
// 动画移动
fnMoveAnmation();
});
// 公共函数
function fnMoveAnmation() {
// 小圆点高亮处理
$pointsList.children().eq(iNowIndex).addClass('active').siblings().removeClass('active');
// 显示下一张
if (iNowIndex > iPreviousIndex) {
// 让当前显示的图片从0移动到左边-760为要出现的让位置
$lis.eq(iPreviousIndex).animate({ 'left': -760 });
// 让要出现的图片从原本的760位置移动到0的位置
$lis.eq(iNowIndex).animate({ 'left': 0 });
// 记录这一次显示的索引 作为下一次动画时要让位置的索引
iPreviousIndex = iNowIndex;
}
}
轮播图-小圆点事件 - 上一张[AppleScript] 纯文本查看 复制代码 xxxxxxxxxx else { // 显示上一张 // 动画从左边向右移动的准备 $lis.eq(iNowIndex).css({ 'left': -760 }); // 让当前显示的图片从0移动到右边760位置 $lis.eq(iPreviousIndex).animate({ 'left': 760 }); // 让要显示的图片从原本-760的位置移动到0的位置 $lis.eq(iNowIndex).animate({ 'left': 0 }); // 记录这一次显示的索引 作为下一次动画时要让位置的索引 iPreviousIndex = iNowIndex; }
轮播图-跨越式点击的BUG解决重复点击同一个小点时bug [AppleScript] 纯文本查看 复制代码 function fnMoveAnmation() {
// 如果重复点击小点什么也不做
if (iNowIndex == iPreviousIndex) return;[AppleScript] 纯文本查看 复制代码 从右向左边滑动时
//解决跨越式点击BUG :抢先一步 将要出现的图片 丢到他该出现的位置 760
$lis.eq(iNowIndex).css({"left":760})
从左向右边滑动时
//解决跨越式点击BUG :抢先一步 将要出现的图片 丢到他该出现的位置 -760
$lis.eq(iNowIndex).css({"left":-760}) - 轮播图-监听左边按钮的点击
[AppleScript] 纯文本查看 复制代码 // 3.点击左边上一张按钮
$prevBtn.click(function () {
iNowIndex--;
fnMoveAnmation();
})
- 轮播图-右侧按钮的点击
[AppleScript] 纯文本查看 复制代码 // 4.点击右边下一张按钮
$nextBtn.click(function () {
iNowIndex++;
fnMoveAnmation();
})- fnMoveAnmation函数的调整
[AppleScript] 纯文本查看 复制代码 // 如果最后一张后继续点击右边按钮,应该向左移动的方式来显示第0张
if (iNowIndex > iPicCount - 1) {
// 下一张时:最后一张的下一张是第0张
iNowIndex = 0;
// 动画从右边向左移动的准备
$lis.eq(iNowIndex).css({ 'left': 760 });
// 让当前显示的图片从0移动到左边-760为要出现的让位置
$lis.eq(iPreviousIndex).animate({ 'left': -760 });
} else if (iNowIndex < 0) { // 如果是第0张时继续点击左边上一张按钮
// 上一张时:第0张的上一第应该是最后一张
iNowIndex = iPicCount - 1;
// 动画从左边向右移动的准备
$lis.eq(iNowIndex).css({ 'left': -760 });
// 让当前显示的图片从0移动到右边760位置
$lis.eq(iPreviousIndex).animate({ 'left': 760 });
} else {
// 把正常情况下的左右滚动代码放在else里面
}- 轮播图- 左右按钮快速点击的bug
动画还没有执行完，点击左右按钮什么事件也不做 bIsAnmation = false; // 是否正在动画中 左右按钮点击事件中加入如果动画中直接返回 进入fnMoveAnmation里时把bIsAnmation改为true 最后的动画执行完成的回调中把bIsAnmation再改回为false; - 轮播图-自动播放
[AppleScript] 纯文本查看 复制代码 // 自动滚动
function fnAutoMove() {
iNowIndex++;
fnMoveAnmation();
}
// 5.定时器自动滚动
var oTimer = setInterval(fnAutoMove, 3000);- 轮播图-鼠标事件
[AppleScript] 纯文本查看 复制代码 //6.鼠标的事件
$slide.mouseenter(function () {
clearInterval(oTimer);
});
$slide.mouseleave(function () {
oTimer = setInterval(fnAutoMove, 3000);
})
- JSON概述和书写格式
|
|
收藏
淘帖
踩
