主要的变化点有:把‘下一条'、‘上一条'的click事件抽象到一个函数showNext中。添加setInterval,添加selector元素的hover事件。好了,我们一个个的看。
showNext函数:
代码如下:
//显示函数
function showNext(flag) {
//隐藏导航
$(config.selector).find('a').css('display', 'none');
//创建遮罩
$.tranzify.createOverlay(config);
//获取当前显示状态的图片
var currImg = $('.' + config.visibleClass, $(config.selector));
if (flag === true) {
//当前图片不是第一张图片
if (currImg.prev().filter('img').length > 0) {
//将上一张图片设置为可显示状态
currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass);
} else {
//设置最后一张图片为可显示状态
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass);
}
} else {
//当前图片不是最后一张图片
if (currImg.next().filter('img').length > 0) {
//将下一张图片设置为可显示状态
currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass);
} else {
//设置第一张图片为可显示状态
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(0).addClass(config.visibleClass);
}
}
//运行遮罩效果
$.tranzify.runTransition(config);
}
. 代码如下:
//设置循环函数
config.interval = setInterval(showNext, (config.multi * 150) + 3000);
. 代码如下:
//鼠标移动到对象上,移出循环函数;鼠标移出,添加循环函数
$(config.selector).hover(function () {
clearInterval(config.interval);
}, function () {
config.interval = setInterval(showNext, (config.multi * 150) + 3000);
});
. 代码如下:
interval = setInterval(showNext, (config.multi * 150) + 3000);
. 代码如下:
//判断是否有没有运行完的补间动画,存在则立即结束动画,移出对象
var transOverlay = $('#' + config.containerID);
if (transOverlay) {
transOverlay.stop(true, true);
transOverlay.remove();
}
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
bootstrap-closable-tab可实现关闭的tab标签页插件
网友评论