QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > 基于swiper画廊图片切换代码

基于swiper画廊图片切换代码

本例是基于swiper.js带有缩略图的画廊布局切换特效。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<link href="css/swiper.css" rel="stylesheet">

<style type="text/css">
img{
	width: 100%;
}

#gallery {
	width: 1200px;
}

#thumbs {
	width: 1000px;
	margin-top: 50px;
}

#thumbs .swiper-slide {
	opacity: 0.3;
}

#thumbs .swiper-slide-thumb-active{
	opacity: 1;
}
</style>

2、body引入HTML代码

<div class="swiper-container" id="gallery">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="img/img1.jpg" alt="轮播图">
		</div>
		<div class="swiper-slide">
			<img src="img/img2.jpg" alt="轮播图">
		</div>
		<div class="swiper-slide">
			<img src="img/img3.jpg" alt="轮播图">
		</div>
		<div class="swiper-slide">
			<img src="img/img4.jpg" alt="轮播图">
		</div>
		<div class="swiper-slide">
			<img src="img/img5.jpg" alt="轮播图">
		</div>
	</div>
	<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>

<div class="swiper-container swiper-container-thumbs" id="thumbs">
	<div class="swiper-wrapper" style="transition-duration: 0ms;">
		<div class="swiper-slide">
			<img src="img/img1.jpg" alt="轮播图">
		</div>
		<div class="swiper-slide">
			<img src="img/img2.jpg" alt="轮播图">
		</div>
		<div class="swiper-slide">
			<img src="img/img3.jpg" alt="轮播图">
		</div>
		<div class="swiper-slide">
			<img src="img/img4.jpg" alt="轮播图">
		</div>
		<div class="swiper-slide">
			<img src="img/img5.jpg" alt="轮播图">
		</div>
	</div>
	<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>

<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">
var thumbsSwiper = new Swiper('#thumbs', {
	spaceBetween: 10,
	slidesPerView: 5,
	watchSlidesVisibility: true, //防止不可点击
})
var gallerySwiper = new Swiper('#gallery', {
	effect : 'coverflow',
	spaceBetween: 10, //缩略图间距
	slidesPerView: 3,
	centeredSlides: true,
	initialSlide :2,
	loop: true,
	autoplay: true,
	thumbs: {
		swiper: thumbsSwiper,
	}
})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:
路尔轩 他的发布 已发布1

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
东京好运彩 www.386302.com-重庆体彩网注册彩| www.050548.com-彩票导刊-| www.149855.com-038彩票平台苹果| www.074.xyz-宝贝彩-| www.429499.com-日本彩票规则介绍| www.28gx.com-手机336彩下载| www.332849.com-网上凤凰彩票靠谱吗| www.91645.com-红圈好彩-| www.53721.cc-昆山快三开奖结果| www.254414.com-亚博彩票官方网站| www.3643.com-一分快三如何看走势| www.589830.com-足彩资讯网-| www.671481.com-手机彩宝网app| www.745977.com-彩43网站-| www.813193.com-乐透型彩票-| www.885444.com-山东云彩宝彩票下载| www.748390.com-彩票网站的四大优势| www.839326.cc-江苏公益彩票| www.909262.com-甘肃体彩网首页| www.0cj.com-天天彩票漏洞| www.809193.com-彩客手机官网| www.121703.com-彩票有猫腻吗| www.82892.com-彩乐汇是正规网站吗| www.53mz.com-宏祥彩票-| www.060.cx-众彩网体彩精品杀号| www.db60.com-万人彩票-| www.718115.com-彩乐乐杀号定胆| www.815908.com-福彩3d今日出奖号| www.jq00.com-内蒙古体彩游泳夺金| www.58398.cc-地方彩种内蒙快三| www.018082.com-3d星彩网-| www.064040.com-竞彩足彩比分500| www.sw79.com-澳门六星彩怎么买| www.505953.com-中国彩票弃奖排名| www.597469.com-澳门彩票投注公司| www.731144.com-重庆分分彩走势图| www.355709.com-竞彩足球扣税规则| www.477717.com-海南体彩环岛赛直播| www.676278.com-快三倍投稳赚吗| www.86rt.cc-乐彩提现多久到账| www.178718.com-竞彩足球-| www.749003.com-彩票不给提现| www.133480.com-49gcc特彩网| www.292823.com-体彩排列三最新中奖| www.552994.com-彩票怎样刷流水| www.739849.com-金榜彩票-| www.879735.com-詹天佑福彩3d预测| www.991975.com-福彩快5是什么| www.og07.com-福利彩票开奖时间表| www.km94.com-易彩快三能赢到钱吗| www.t18.org-今日七乐彩最新预测| www.23cd.com-天津彩票中心| www.993.pw-彩票中6位数| www.369630.com-⑧号彩票论坛马会开| www.489809.com-名爵娱乐时时彩| www.605908.com-吉祥彩票是正规的吗| www.826764.com-京东时时彩计划| www.895073.com-优彩论坛-| www.967683.com-彩票微信计划群导师| www.81633.com-跟计划买彩票| www.57dp.com-长沙哪里办彩票店| www.286644.com-彩吧p3图谜第一版| www.356242.com-分分彩助赢免费计划| www.19ez.com-福利彩票上期开奖| www.283197.com-体彩彩种-| www.097775.com-微信怎么玩快三| www.102102.cc-足彩中奖5800万| www.953695.com-竞彩足球单场平胜负| www.325355.com-海南私彩包码| www.456939.com-彩票梯子游戏在哪玩| www.547417.com-万彩影像大师激活码| www.766154.com-大发快三是不是真的| www.893179.com-屠龙勇士潘森炫彩| www.963979.com-彩票双色球红号分析| 500彩票www.349477.com| www.48ih.com-利彩客户端下载| www.977416.com-兰考彩礼2018| www.808967.com-体彩开奖助手试机号| www.890452.com-全民智投彩票下载| www.965271.com-360彩票导航图| PK彩票www.909309.com| www.nj10.com-竞彩蓝球专家推荐| www.3jn.com-竞彩足球比分爱彩| www.65lo.com-亿客隆彩票-| www.0411.link-159竞彩足球没了| www.522756.com-时时彩追豹子计划| www.590081.com-竞彩官方赔率特点| www.665383.com-七乐彩试机号| www.122885.com-i8彩票计划稳| www.486071.com-飞彩网是真的么| www.590428.com-彩票网平台-| www.773485.com-台湾时时彩官方| www.901478.com-精彩十分下载| www.986366.com-易彩堂大发快三开挂| www.lr45.com-中彩网是什么真的么| www.6rw.com-彩票自动下单软件| www.580999.com-杭州福彩店-| www.28267.cc-常州福彩中心在哪里| www.318386.com-福彩开奖结果查询表| www.418278.com-龙彩涂料-| www.523366.com-578彩票app-| www.593232.com-蓝光乐彩城-| www.695117.com-9u官方彩票平台| www.780425.com-人工智能彩票软件| www.866487.com-昨晚彩票开奖结果| 华夏彩票www.hx1161.com| www.050502.com-彩票博彩36o| www.944611.com-百万彩票是真的吗吗| www.85sx.com-天天乐彩票怎么样| www.26065.com-彩虹的另一层含义| www.026829.com-彩票工资车| www.199534.com-彩票开奖查询软件| www.360903.com-福彩3d报纸彩图版| www.424212.com-星彩虎论坛-| www.wa73.com-快三图片图片图库| www.322709.com-国彩网-| www.4333.in-鑫彩网彩神争霸下载| www.xq.com-福彩五分快三走势图| www.116658.com-福彩高手3+d彩票| www.238008.com-18268彩票-| www.622083.com-澳门118彩票网| www.728276.com-海南彩票软件| www.813399.com-福彩已亥猪刮刮乐| www.924199.com-世界中彩票最多的人| 华彩www.71399n.com| www.yo86.com-全国快三开奖平台| www.171667.com-河北快三3月走势图| www.308836.com-彩票计划手机版| www.922418.com-北京足彩招聘| www.998360.com-快三单双计划| www.mn93.com-彩票送彩金-| www.819370.com-竞彩预测套用公式| www.34qw.com-彩界老翁双胆| www.43846.com-中国福彩网北京快三| www.044818.com-北京幸运28彩票| www.46kx.com-黄金叶七彩爆珠| www.02qo.com-微信彩票金豆领取| www.9956.cn-天天购彩票正规吗| www.590132.com-易购彩票app| www.755543.com-云南福彩网快乐十分| www.022542.com-e球彩两场全包玩法| www.58678.com-彩霸王今期图片| www.022034.com-与彩票有关的故事| www.859561.com-福建省福利彩票三d| www.971849.com-福彩字谜17500| www.eu91.com-快三算号软件手机版| www.00ty.com-彩虹羽泉歌词解析| www.763.mobi-时时彩有漏洞嘛| www.192226.com-七彩网彩app| www.35258.com-江苏老快三遗漏数据| www.680820.com-掌优彩票下载安装| www.416114.com-a彩娱-| www.748775.com-中彩彩票图片| www.712303.com-手机上彩票是真是假| www.964964.com-彩票追加-| www.cp53.com-下载快三彩票| www.sl66.com-中国足球彩票规则| www.qf89.com-彩店二维码-| www.4872.net-福彩怎么算才能中奖| www.19809.com-福利彩票提款| www.689718.com-卖福利彩票赚钱吗| www.643688.com-黑龙江省时时彩开奖| www.735856.com-彩乐园下载安装| www.823188.com-天下体彩主页|