260 lines
6.9 KiB
JavaScript
260 lines
6.9 KiB
JavaScript
// Avoid `console` errors in browsers that lack a console.
|
||
(function() {
|
||
var method;
|
||
var noop = function () {};
|
||
var methods = [
|
||
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
||
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
||
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
|
||
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
|
||
];
|
||
var length = methods.length;
|
||
var console = (window.console = window.console || {});
|
||
|
||
while (length--) {
|
||
method = methods[length];
|
||
|
||
// Only stub undefined methods.
|
||
if (!console[method]) {
|
||
console[method] = noop;
|
||
}
|
||
}
|
||
}());
|
||
|
||
// Place any jQuery/helper plugins in here.
|
||
|
||
/*!
|
||
* jquery.slide v1.1.0
|
||
* A simple jQuery slider.
|
||
* https://github.com/cobish/jquery.slide
|
||
|
||
* Copyright (c) 2016, cobish
|
||
* Released under the MIT license.
|
||
*/
|
||
(function($, window) {
|
||
'use strict';
|
||
|
||
var slide = {
|
||
// default options
|
||
defaults: {
|
||
isAutoSlide: true, // 自动轮播
|
||
isHoverStop: true, // 鼠标移上是否停止轮播
|
||
isBlurStop: true, // Window失去焦点是否停止轮播
|
||
isShowDots: true, // 是否显示状态点
|
||
isShowArrow: true, // 是否显示左右箭头
|
||
isHoverShowArrow: true, // 是否鼠标移上才显示箭头
|
||
isLoadAllImgs: false, // 是否一次性加载完全部图片
|
||
slideSpeed: 10000, // 轮播速度 (ms)
|
||
switchSpeed: 500, // 图片切换速度 (ms)
|
||
dotsClass: 'dots', // 状态点样式
|
||
dotActiveClass: 'active', // 状态点激活样式
|
||
dotsEvent: 'click', // 状态点事件,click或mouseover或mouseenter
|
||
arrowClass: 'arrow', // 箭头样式
|
||
arrowLeftClass: 'arrow-left', // 左箭头样式
|
||
arrowRightClass: 'arrow-right' // 右箭头样式
|
||
},
|
||
|
||
// curr options
|
||
options: null,
|
||
|
||
// 当前索引
|
||
curIndex: 0,
|
||
|
||
// 定时器
|
||
timer: null,
|
||
|
||
// 状态点集合
|
||
dotsList: [],
|
||
|
||
// init function
|
||
init: function(elem, options) {
|
||
var $self = $(elem),
|
||
list = $self.find('ul li'),
|
||
self = this,
|
||
o;
|
||
|
||
o = this.options = $.extend({}, this.defaults, options);
|
||
|
||
// 显示状态点
|
||
if (o.isShowDots) {
|
||
this._createDots(elem, list);
|
||
}
|
||
|
||
// 显示左右箭头
|
||
if (o.isShowArrow) {
|
||
this._createArrow(elem, list);
|
||
}
|
||
|
||
// 一次性加载完全部图片
|
||
if (o.isLoadAllImgs) {
|
||
list.each(function() {
|
||
$(this).css({
|
||
'background': 'url(' + $(this).attr('data-bg') + ')',
|
||
'opacity': '0',
|
||
'z-index': '0',
|
||
'background-position': '50% 50%',
|
||
'background-size': 'cover'
|
||
});
|
||
$(this).attr('data-bg', '');
|
||
});
|
||
}
|
||
|
||
// 显示第一个
|
||
this._showBlock(list[this.curIndex]);
|
||
|
||
// 自动轮播
|
||
if (o.isAutoSlide) {
|
||
this._defaultSlide(list);
|
||
|
||
// 鼠标移入移除事件
|
||
if (o.isHoverStop) {
|
||
var className = $self.attr('class');
|
||
$self.on('mouseenter', function(e) {
|
||
clearInterval(self.timer);
|
||
}).on('mouseleave', function() {
|
||
clearInterval(self.timer);
|
||
self._defaultSlide(list);
|
||
});
|
||
}
|
||
|
||
// Window获取失去焦点事件
|
||
if (o.isBlurStop) {
|
||
$(window).on('blur', function() {
|
||
clearInterval(self.timer);
|
||
}).on('focus', function() {
|
||
clearInterval(self.timer);
|
||
self._defaultSlide(list);
|
||
});
|
||
}
|
||
}
|
||
},
|
||
|
||
// default slide
|
||
_defaultSlide: function(list) {
|
||
var self = this;
|
||
this.timer = setInterval(function() {
|
||
self._hideBlock(list[self.curIndex]);
|
||
self.curIndex = (self.curIndex + 1) % list.length;
|
||
self._showBlock(list[self.curIndex]);
|
||
}, this.options.slideSpeed);
|
||
},
|
||
|
||
// show block
|
||
_showBlock: function(block) {
|
||
var o = this.options,
|
||
$block = $(block),
|
||
bg = $(block).attr('data-bg');
|
||
|
||
if (bg) {
|
||
$block.css({
|
||
'background': 'url(' + bg + ')',
|
||
'opacity': '0',
|
||
'z-index': '0',
|
||
'background-position': '50% 50%',
|
||
'background-size': 'cover'
|
||
});
|
||
$block.attr('data-bg', '');
|
||
}
|
||
|
||
$block.stop().animate({
|
||
'opacity': '1',
|
||
'z-index': '1'
|
||
}, o.switchSpeed);
|
||
|
||
if (o.isShowDots) {
|
||
$(this.dotsList[this.curIndex]).addClass(o.dotActiveClass);
|
||
}
|
||
},
|
||
|
||
// hide block
|
||
_hideBlock: function(block) {
|
||
var o = this.options;
|
||
|
||
$(block).stop().animate({
|
||
'opacity': '0',
|
||
'z-index': '0'
|
||
}, o.switchSpeed);
|
||
|
||
if (o.isShowDots) {
|
||
$(this.dotsList[this.curIndex]).removeClass(o.dotActiveClass);
|
||
}
|
||
},
|
||
|
||
// create dots
|
||
_createDots: function(elem, list) {
|
||
var self = this,
|
||
dotsEvent = this.options.dotsEvent;
|
||
|
||
var dots = $('<ol/>', {
|
||
class: this.options.dotsClass
|
||
});
|
||
|
||
var dotsList = [];
|
||
for (var i = 0; i < list.length; i++) {
|
||
dotsList[i] = $('<li/>');
|
||
dots.append(dotsList[i]);
|
||
}
|
||
|
||
$(elem).append(dots);
|
||
this.dotsList = dotsList;
|
||
|
||
// dots添加事件
|
||
if (dotsEvent === 'click' || dotsEvent === 'mouseover' || dotsEvent === 'mouseenter') {
|
||
dots.find('li').on(dotsEvent, function() {
|
||
self._hideBlock(list[self.curIndex]);
|
||
self.curIndex = $(this).index();
|
||
self._showBlock(list[self.curIndex]);
|
||
});
|
||
}
|
||
},
|
||
|
||
// create arrowClass
|
||
_createArrow: function(elem, list) {
|
||
var self = this;
|
||
|
||
var arrow = $('<div/>', {
|
||
class: this.options.arrowClass
|
||
});
|
||
|
||
var leftArrow = $('<a/>', {
|
||
class: this.options.arrowLeftClass
|
||
});
|
||
|
||
var rightArrow = $('<a/>', {
|
||
class: this.options.arrowRightClass
|
||
});
|
||
|
||
arrow.append(leftArrow).append(rightArrow);
|
||
$(elem).append(arrow);
|
||
|
||
if (this.options.isHoverShowArrow) {
|
||
arrow.css('opacity', 0);
|
||
$(elem).on('mouseenter', function() {
|
||
arrow.css('opacity', 1);
|
||
}).on('mouseleave', function() {
|
||
arrow.css('opacity', 0);
|
||
});
|
||
}
|
||
|
||
leftArrow.on('click', function() {
|
||
self._hideBlock(list[self.curIndex]);
|
||
self.curIndex = (list.length + (self.curIndex - 1)) % list.length;
|
||
self._showBlock(list[self.curIndex]);
|
||
});
|
||
|
||
rightArrow.on('click', function() {
|
||
self._hideBlock(list[self.curIndex]);
|
||
self.curIndex = (self.curIndex + 1) % list.length;
|
||
self._showBlock(list[self.curIndex]);
|
||
});
|
||
}
|
||
};
|
||
|
||
// main function
|
||
$.fn.slide = function(options) {
|
||
slide.init(this, options);
|
||
return this;
|
||
};
|
||
|
||
})(jQuery, window);
|