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

最新推荐文章于 2023-12-04 10:58:33 发布

普通人6

最新推荐文章于 2023-12-04 10:58:33 发布

阅读量300

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML JavaScript 文章标签： javascript 前端 es6 1024程序员节

本文链接：https://blog.csdn.net/qq_19716091/article/details/120975066

HTML 同时被 2 个专栏收录

16 篇文章

订阅专栏

JavaScript

14 篇文章

订阅专栏

本文介绍了如何使用Swiper库在两个轮播图中实现图片的自动切换，并演示了用户交互触发滑动到特定位置的功能。通过HTML和JavaScript操作，展示了如何设置autoplay、观察者模式和响应点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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