pfhwyigou/frontend/web/overseas/js/swiper.js

var _imgid =0;
var _dataid =0;
var _datahid =0;

// 相册
$('.y_tuku_ul ul.y_tuku_ul_tu li').on('click',function(){
    // 索引第几张图片
    _imgid = $(this).index();

     _dataid = $(this).attr('data-id');
     _datahid = $(this).attr('data-hid');



	lpindex_xc(_imgid);

})



function lpindex_xc(imgid){

$.post('/json/albumlist',{album_id:_dataid,hid:_datahid,csrf_token_f:csrfToken},function (data) {

	var data=data.data;
	var html = '';

	html+=  '<div class="pc_slide_bj"></div>';
	html+=  '<div class="view">';
	html+=  '<div class="pc_slide_gb"><img src="/overseas/img/ico_colke.png" alt=""></div>';
	// html+=  '<div class="pc_slide_fd"><img src="/image/swiper/ico_colke.png" alt=""></div>';
	html+=  '<div class="swiper-container">';

	if(data.length != 1){
		html+=  '<a class="arrow-left" href="#"></a>';
		html+=  '<a class="arrow-right" href="#"></a>';
	}
	html+=  '<div class="swiper-wrapper">';

    $.each(data,function(key,val){
		html+=  '<div class="swiper-slide">';
		html+=  '<div class="swiper_box">';
		 html+=  '<div class="swiper-zoom-container"><img class="" src="'+val.img+'" alt=""></div>';
		// html+=  '<div class="swiper-zoom-container"><img class="" src="/overseas/img/img_5.png" alt=""></div>';
		html+=  '</div>';
		html+=  '</div>';
    });

	html+=  '</div>';
	html+=  '</div>';
	html+=  '</div>';

	if(data.length != 1){
	html+=  '<div class="preview_box">';
	// html+=  '<div class="preview_text"><span>'+data[0].title+'</span></div>';
	html+=  '<div class="preview">';
	html+=  '<a class="arrow-left" href="#"></a>';
	html+=  '<a class="arrow-right" href="#"></a>';
	html+=  '<div class="swiper-container">';
	html+=  '<div class="swiper-wrapper">';

    $.each(data,function(key,val){
		html+=  '<div class="swiper-slide">';
		// html+=  '<img src="/overseas/img/img_5.png" alt="">';
		 html+=  '<img src="'+val.img+'" alt="">';
		html+=  '</div>';
    });

	html+=  '</div>';
	html+=  '</div>';
	html+=  '</div>';
	html+=  '</div>';
	}

    $('.pc-slide').html(html);


    $('.pc-slide').show();



	var _width = $('.preview').innerWidth();
	$('.preview').css('margin-left',-_width/2);
    $('.preview').show();

	$('.preview  .swiper-wrapper .swiper-slide').eq(imgid).addClass('active-nav');   //默认选中

     // 放大功能
    function zoomImg(o) {
        var zoom = parseInt(o.style.zoom, 10) || 100;
        zoom += event.wheelDelta / 12; //可适合修改

        // console.log(zoom);
        if (zoom < 310 && zoom > 50 ) o.style.zoom = zoom + '%';
    }
    $(document).ready(function() {
        $(".view .swiper_box img").bind("mousewheel",
            function() {
                zoomImg(this);
                return false;
            });
    });

	// $(".pc_slide_fd").on('click',function(){
	//       var style = $('.view .swiper-slide-active .swiper_box img').attr('style');
	//       console.log(style);
	      
	// 	  $('.view .swiper-slide-active .swiper_box img').css('zoom','100%');
		
	// })




	$(".view .swiper_box img").dblclick(function(){
        $(this).css('zoom','100%');
	});




	var viewSwiper = new Swiper('.view .swiper-container', {
		onlyExternal : true,
		centeredSlides : true,
		initialSlide :imgid,
        
		onSlideChangeStart: function() {
			    updateNavPosition(imgid);

		}
	})

	$('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
		   $('.view .swiper_box img').css('zoom','100%');
		e.preventDefault()
		if (viewSwiper.activeIndex == 0) {
			viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
			return
		}
		viewSwiper.slidePrev()
	})
	$('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
		   $('.view .swiper_box img').css('zoom','100%');
		e.preventDefault()
		if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
			viewSwiper.slideTo(0, 1000);
			return
		}
		viewSwiper.slideNext()
	})

	var previewSwiper = new Swiper('.preview .swiper-container', {
		//visibilityFullFit: true,
		slidesPerView: 'auto',
		allowTouchMove: false,
		onTap: function() {
			    viewSwiper.slideTo(previewSwiper.clickedIndex)
			       $('.view .swiper_box img').css('zoom','100%');
		}
	})

	function updateNavPosition(imgid) {

			if(imgid == 0){

					$('.preview .active-nav').removeClass('active-nav')

					var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav');


					if (!activeNav.hasClass('swiper-slide-visible')) {
						if (activeNav.index() > previewSwiper.activeIndex) {
							var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
							previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
						} else {
							previewSwiper.slideTo(activeNav.index())
						}
					}

			}


		}



	$('.pc_slide_gb').on('click',function(){
		$('.pc-slide').hide();
		$('.pc-slide').html('');
	})	

     imgid=0;

	})

}