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);
|