swiper 3d立体效果缩略图
<div class="pic_box">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="item">
				<div class="t">RED系统</div>
				<div class="img"><img src="img/pic/1.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">城市更新导税典系统</div>
				<div class="img"><img src="img/pic/2.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">汇缴退税易</div>
				<div class="img"><img src="img/pic/3.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">创享易</div>
				<div class="img"><img src="img/pic/4.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">国际汇税通</div>
				<div class="img"><img src="img/pic/5.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">“慧调解”数字化管理系统</div>
				<div class="img"><img src="img/pic/6.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">社保非税智库管理平台</div>
				<div class="img"><img src="img/pic/7.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">“快统易”项目系统</div>
				<div class="img"><img src="img/pic/8.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">MDI指标项目系统</div>
				<div class="img"><img src="img/pic/9.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">数字税费</div>
				<div class="img"><img src="img/pic/10.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">大屏展示系统</div>
				<div class="img"><img src="img/pic/11.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">V-Tax远程可视化办税系统</div>
				<div class="img"><img src="img/pic/12.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">家具行业管理系统功能模块</div>
				<div class="img"><img src="img/pic/13.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">容缺受理</div>
				<div class="img"><img src="img/pic/14.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">自然人电子税务局</div>
				<div class="img"><img src="img/pic/15.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">金税三期征管系统</div>
				<div class="img"><img src="img/pic/16.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">“智退”出口退税辅助平台</div>
				<div class="img"><img src="img/pic/17.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">大数据应用平台&全景可视化</div>
				<div class="img"><img src="img/pic/18.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">3R人事管理系统</div>
				<div class="img"><img src="img/pic/19.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">税务党建云平台</div>
				<div class="img"><img src="img/pic/20.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">税网卫士</div>
				<div class="img"><img src="img/pic/21.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">佛山税务应用云2.0</div>
				<div class="img"><img src="img/pic/22.jpg"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="item">
				<div class="t">退税保</div>
				<div class="img"><img src="img/pic/23.jpg"></div>
			</div>
		</div>
	</div>
</div>

<script>
					var newsSwiper = new Swiper('.pic_box', {
						watchSlidesProgress: true,
						slidesPerView: 'auto',
						centeredSlides: true,
						loop: true,
						loopedSlides: 23,
						speed: 1000,
						autoplay: {
							delay: 6000,
							disableOnInteraction: false,
						},
						on: {
							progress: function(progress) {
								for (i = 0; i < this.slides.length; i++) {
									var slide = this.slides.eq(i);
									var slideProgress = this.slides[i].progress;
									modify = 1;
									if (Math.abs(slideProgress) > 1) {
										modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
									}
									translate = slideProgress * modify * 260 + 'px';
									scale = 1 - Math.abs(slideProgress) / 5;
									zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
									slide.transform('translateX(' + translate + ') scale(' + scale + ')');
									slide.css('zIndex', zIndex);
									slide.css('opacity', 1);
									if (Math.abs(slideProgress) > 3) {
										slide.css('opacity', 0);
									}
								}
							},
							setTransition: function(transition) {
								for (var i = 0; i < this.slides.length; i++) {
									var slide = this.slides.eq(i)
									slide.transition(transition);
								}
							},
							slideChangeTransitionStart: function(){
								$('.pic_about .item').hide();
								$('.pic_about .item').eq(this.realIndex).fadeIn();
							}
						}
					})
					</script>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注