Swiper 仿淘宝 电脑版 详情页 轮播图(没有放大镜)

var banner = '';
$.each(info.banner, function (key, vo) {
	// console.log(key);
	// console.log(vo);

	banner += '<div class="swiper-slide">';
	banner += '<img src="' + vo + '" alt="" />';
	banner += '</div>';
});
// console.log(banner);
$('#banner .swiper-wrapper').html(banner);

var banner_obj = new Swiper('.banner', {
	autoplay: true,
	autoplay: {
		disableOnInteraction: false,
	},
	slidesPerView: 'auto',
	observer: true,
	observeParents: true,
	loop: true,
	pagination: {
		el: '.swiper-pagination',
	},
	on: {
		transitionEnd: function () {
			// console.log(this);
			// console.log(this.activeIndex);

			var info = $(this.el)
				.children('.swiper-wrapper')
				.children('.swiper-slide-active')
				.children('img')
				.attr('src');

			// console.log(info);

			$('.banner_s')
				.children('.swiper-wrapper')
				// .children('.swiper-slide-active')
				// .children('img')
				.find('img')
				.removeClass('on');

			$('.banner_s')
				.children('.swiper-wrapper')
				// .children('.swiper-slide-active')
				// .children('img[src="' + info + '"]')
				.find('img[src="' + info + '"]')
				.addClass('on');
		},
	},
});

$('#banner_s .swiper-wrapper').html(banner);

var banner_s_obj = new Swiper('.banner_s', {
	autoplay: false,
	slidesPerView: 3,
	observer: true,
	observeParents: true,
	loop: false,
	pagination: {
		el: '.swiper-pagination',
	},
	on: {
		click: function (e) {
			// console.log(e);
			// console.log(e.target);

			// var info = $(this).attr('src');
			var info = $(e.target).attr('src');
			// console.log(info);

			// console.log(this);
			var index = $(this.el)
				.children('.swiper-wrapper')
				.find('.swiper-slide')
				.index($(e.target).parent());

			// console.log(index);
			var banner_obj_item = banner_obj;
			var banner_obj_key = Object.keys(banner_obj);
			// console.log(banner_obj_key);
			// console.log(isNaN(banner_obj_key[0]));
			if (!isNaN(banner_obj_key[0])) {
				banner_obj_item = banner_obj[0];
			}

			// console.log(banner_obj);
			// console.log(banner_obj[0]);
			// banner_obj[0].slideTo(0);
			if (index !== -1) {
				banner_obj_item.slideTo(index);
			}
		},
	},
});

slideTo Swiper自带的方法,可以跳转到指定位置
Object.keys(demo) JS获取object类型数据的键

Object.keys支持情况

https://caniuse.com

最后

以上就是现代小蚂蚁为你收集整理的Swiper 仿淘宝 电脑版 详情页 轮播图(没有放大镜)的全部内容，希望文章能够帮你解决Swiper 仿淘宝 电脑版 详情页 轮播图(没有放大镜)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。