|
|
|
/**
|
|
|
|
* (品牌优选)图片幻灯片插件
|
|
|
|
* @author: wangqing(robin.wang@yoho.cn)
|
|
|
|
* @date: 205/7/2
|
|
|
|
*/
|
|
|
|
(function($) {
|
|
|
|
$.fn.slider2 = function(options) {
|
|
|
|
var timer;
|
|
|
|
|
|
|
|
function autoplayrecycle(index, limit, toright) {
|
|
|
|
window.setTimeout(autoplay, $.fn.slider2.defaults.delaytime, index, limit, toright);// eslint-disable-line
|
|
|
|
}
|
|
|
|
|
|
|
|
function autoplay(index, limit, toright) {
|
|
|
|
if (toright === true) {
|
|
|
|
$('.img-brand-switch .next').trigger('click');
|
|
|
|
if (index === (limit - 3)) {
|
|
|
|
autoplayrecycle(--index, limit, false);
|
|
|
|
} else {
|
|
|
|
autoplayrecycle(++index, limit, true);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
$('.img-brand-switch .prev').trigger('click');
|
|
|
|
if (index === 0) {
|
|
|
|
autoplayrecycle(++index, limit, true);
|
|
|
|
} else {
|
|
|
|
autoplayrecycle(--index, limit, false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function autoClickNext(dom) {
|
|
|
|
var delaytime = 'delaytime' in options ? options.delaytime :
|
|
|
|
$.fn.slider2.defaults.delaytime;
|
|
|
|
|
|
|
|
timer = setInterval(function() {
|
|
|
|
dom.find('.next').click();
|
|
|
|
}, delaytime);
|
|
|
|
}
|
|
|
|
|
|
|
|
function changePic(index, width, callback) {
|
|
|
|
var offersetleft = -(index * width);
|
|
|
|
|
|
|
|
$('.img-list')
|
|
|
|
.animate({
|
|
|
|
'margin-left': offersetleft + 'px'
|
|
|
|
}, 'slow', callback);
|
|
|
|
|
|
|
|
}
|
|
|
|
$.fn.slider2.defaults = {
|
|
|
|
index: 0,
|
|
|
|
shownum: 3,
|
|
|
|
autoplay: false,
|
|
|
|
delaytime: 3000
|
|
|
|
};
|
|
|
|
return this.each(function() {
|
|
|
|
var opts = $.extend({}, $.fn.slider2.defaults, options);
|
|
|
|
var mr = parseInt($('.img-item').css('margin-right'), 10);
|
|
|
|
var $banneritems = $('.img-item');
|
|
|
|
var bannerarr = [];
|
|
|
|
var _width = $banneritems.outerWidth() + mr,
|
|
|
|
_size = $banneritems.length,
|
|
|
|
j = 0;
|
|
|
|
|
|
|
|
if (_size <= 3) {
|
|
|
|
$(this).find('.img-brand-switch').hide();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
for (j = 0; j < $banneritems.length; j++) {
|
|
|
|
bannerarr.push($banneritems[j]);
|
|
|
|
}
|
|
|
|
_size = bannerarr.length;
|
|
|
|
$(this).find('.img-list').css({
|
|
|
|
width: (_width * _size)
|
|
|
|
});
|
|
|
|
$(this).find('.next').on('click', function(e) {
|
|
|
|
var i = 0,
|
|
|
|
_obj = null;
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
changePic(3, _width, function() {
|
|
|
|
for (i = 0; i < 3; i++) {
|
|
|
|
_obj = bannerarr.shift();
|
|
|
|
|
|
|
|
$('.img-item').parent().append(_obj.outerHTML);
|
|
|
|
bannerarr.push(_obj);
|
|
|
|
}
|
|
|
|
$('.img-item').first().remove();
|
|
|
|
$('.img-item').first().remove();
|
|
|
|
$('.img-item').first().remove();
|
|
|
|
$('.img-list').css({
|
|
|
|
'margin-left': '0'
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
$(this).find('.prev').on('click', function(e) {
|
|
|
|
var i = 0,
|
|
|
|
_obj = null,
|
|
|
|
offersetleft = '';
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
for (i = 0; i < 3; i++) {
|
|
|
|
_obj = bannerarr.pop();
|
|
|
|
|
|
|
|
$('.img-item').parent().prepend(_obj.outerHTML);
|
|
|
|
bannerarr.unshift(_obj);
|
|
|
|
}
|
|
|
|
offersetleft = 3 * _width;
|
|
|
|
$('.img-item').last().remove();
|
|
|
|
$('.img-item').last().remove();
|
|
|
|
$('.img-item').last().remove();
|
|
|
|
$('.img-list').css({
|
|
|
|
'margin-left': -offersetleft + 'px'
|
|
|
|
});
|
|
|
|
changePic(0, _width);
|
|
|
|
});
|
|
|
|
if (opts.autoplay === true) {
|
|
|
|
// autoplayrecycle(opts.index, _size, true);
|
|
|
|
autoClickNext($(this));
|
|
|
|
$(this).hover(function() {
|
|
|
|
clearInterval(timer);
|
|
|
|
}, function() {
|
|
|
|
autoClickNext($(this));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}($)); |
...
|
...
|
|
