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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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);
			}
		},
	},
});