82 lines
3.5 KiB
JavaScript
82 lines
3.5 KiB
JavaScript
;(function ($) {
|
|
$.fn.seeBigPicture = function (options) {
|
|
var opts;
|
|
var defaluts = {
|
|
initialSlide:0,
|
|
showButton:true,//是否显示左右按钮
|
|
showBottomPic:true,//是否将所有图片显示在底部
|
|
canSlide:false
|
|
};
|
|
opts = $.extend({},defaluts, options);
|
|
return this.each(function () {
|
|
var img = $(this).find('img');
|
|
var swiperHtml = ''
|
|
var bottomHtml = ''
|
|
|
|
for(var i=0;i<img.length;i++){
|
|
swiperHtml+='<div class="swiper-slide"><img src="' +$(img[i]).attr('src')+
|
|
'" alt=""></div>'
|
|
if(opts.showBottomPic){
|
|
if(i==opts.initialSlide){
|
|
bottomHtml+=' <div class="ac"><img src="' +$(img[i]).attr('src')+
|
|
'" alt=""></div>'
|
|
}
|
|
else {
|
|
bottomHtml+=' <div><img src="' +$(img[i]).attr('src')+
|
|
'" alt=""></div>'
|
|
}
|
|
}
|
|
}
|
|
$('body').append('<div class="alert-big-picture" id="alertBigPicture">\n' +
|
|
' <div class="alert-big-picture-container swiper-container">\n' +
|
|
' <div class="swiper-wrapper">'+swiperHtml+
|
|
' </div>' +
|
|
(opts.showButton?'<div class="alert-button-prev swiper-button-prev"></div><div class="alert-button-next swiper-button-next"></div>':'') +
|
|
' </div><div class="bottom-group">' +bottomHtml+
|
|
'</div></div>')
|
|
var bottomPic = $('#alertBigPicture .bottom-group').find('div')
|
|
var swiperOpt = {}
|
|
if(img.length>0){
|
|
if(opts.showButton){
|
|
swiperOpt = {
|
|
// 如果需要前进后退按钮
|
|
nextButton: '.alert-button-next',
|
|
prevButton: '.alert-button-prev',
|
|
onSlideChangeEnd:function (swiper) {
|
|
var index = swiper.activeIndex;
|
|
bottomPic.eq(index).addClass('ac').siblings().removeClass('ac')
|
|
var sum = 0;
|
|
var isAc = false;
|
|
bottomPic.each(function () {
|
|
if($(this).is('.ac')){
|
|
isAc = true
|
|
}
|
|
else if(!isAc){
|
|
sum+=$(this).outerWidth(true)
|
|
}
|
|
})
|
|
$('#alertBigPicture .bottom-group').scrollLeft(sum-100)
|
|
}
|
|
}
|
|
}
|
|
swiperOpt.initialSlide = opts.initialSlide;
|
|
var mySwiper = new Swiper ('.alert-big-picture-container',swiperOpt)
|
|
if(!opts.canSlide){
|
|
$('.alert-big-picture-container').addClass('swiper-no-swiping')
|
|
}
|
|
}
|
|
bottomPic.click(function () {
|
|
var index = $(this).index()
|
|
bottomPic.eq(index).addClass('ac').siblings().removeClass('ac')
|
|
mySwiper.slideTo(index,100,false)
|
|
})
|
|
$('#alertBigPicture').click(function (e) {
|
|
if($(e.target).is('.alert-big-picture')||$(e.target).is('.swiper-slide')){
|
|
$('#alertBigPicture').remove()
|
|
}
|
|
})
|
|
})
|
|
//你自己的插件代码
|
|
};
|
|
})(jQuery);
|