Study笔记

jQuery图片视差轮播切换代码

脚本简介jQuery图片视差轮播切换代码是一款基于swiper.js制作带标签的图片视差滚动特效。

jQuery图片视差轮播切换代码

代码展示:

<div class="bannerBox">
	<div class="swiper-container" id="swiper1">
		<div class="swiper-wrapper swiper-no-swiping" >
			<div class="swiper-slide color-red">
				<img src="img/long1.jpg">
			</div>
			<div class="swiper-slide color-blue">
				<img src="img/long2.jpg">
			</div>
			<div class="swiper-slide color-yellow">
				<img src="img/long3.jpg">
			</div>
			<div class="swiper-slide color-green">
				<img src="img/long4.jpg">
			</div>
			<div class="swiper-slide color-pink">
				<img src="img/long5.jpg">
			</div>
		</div>
	</div>
	<div class="swiper-container" id="swiper2">
		<div class="swiper-wrapper swiper-no-swiping">
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short1.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short2.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short3.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short4.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short5.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short6.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short7.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short8.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short9.png"></a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;"><img src="img/short10.png"></a>
			</div>
		</div>
	</div>		
	<div class="left"><img src="img/bannerL.png"></div>
	<div class="right"><img src="img/bannerR.png"></div>		
</div>

完整jQuery图片视差轮播切换代码下载

链接:https://pan.baidu.com/s/1iG6nvdGRnN7e-W_sI-wQmA 提取码:uxni
相关文章

个人简介

说的再好不如做的漂亮

标签聚合