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天

知道了
亚洲28 www.636970.com-在中国都有那些彩票| www.895527.com-有人网投彩票赚钱吗| www.982561.com-同城彩票官方网站| www.yr79.com-长春市体彩兑奖地址| www.38mj.com-动物彩铅简笔画| www.1053.cn-彩票分析师是骗子吗| www.8680.biz-体彩七星19011| www.52753.cc-恒大彩票靠谱吗| www.007780.cc-澳客彩网-| www.088453.com-吉林快三网络购买| www.172210.com-彩票软件官网下载| www.309936.com-延边州体彩中心| www.389121.com-乐彩字谜图谜论坛| www.536581.com-彩票分什么类型| www.633868.com-叮叮彩下载app| www.734703.com-彩色沥青是什么东西| www.821613.com-今日福彩藏机图| www.903577.com-福彩3d投注方法| www.974868.com-海南经纪报体彩下载| www.ed43.com-吉林快三图群| www.yp52.com-彩票统计分析器| www.32oc.com-红旗彩票首页注册| www.1258.top-08vip彩票-| www.8508.wang-常州竞彩店转让| www.47345.cc-男方悔婚要求退彩礼| www.99048.com-时时彩推广手段| www.076510.com-体育彩票彩种介绍| www.157306.com-足彩冷热指数分析| www.287878.com-福彩购彩大厅| www.382258.com-得力彩票助手app| www.513095.com-七星彩开心-| www.593799.com-甘肃快三走势带连线| www.676959.com-万彩办公室大师安卓| www.763728.com-摩羯足彩预测下载| www.886709.com-福体彩开奖直播| www.971748.com-9w彩票-| www.cp8996.com-南京福彩快三走势图| www.qc97.com-4月胜负彩-| www.11vm.com-彩61大发快三| www.89eu.com-668彩票官网下载| www.3572.cn-送彩金游戏论坛| www.9769.biz-彩票被洗衣机洗了| www.77663.cc-cp36是什么彩票| www.033698.com-易彩堂娱乐app| www.135858.com-上海快三计划大小| www.219749.com-众彩网首页官网| www.297872.com-人人都中彩-| www.373055.com-c彩16网址-| www.480320.com-怎么当91竞彩大神| www.566052.com-中华彩吧红包雨| www.645994.com-竞彩知识大全| www.804179.com-福彩1d技巧-| www.880971.com-私彩平台代理| www.971992.com-上海福彩中心地址| www.cai9455.com兰州快三开奖号| www.nb03.com-新快3彩票下载| www.8vw.com-买体彩用什么app| www.71wl.com-彩票独胆是什么意思| www.1601.in-河南休彩彩481| www.9873.in-哪里能查足彩销量| www.54017.com-复式彩票中奖5元| www.001384.com-新彩吧福彩三d| www.071738.com-彩票开业活动| www.139019.com-同城彩票手机版| www.221053.com-体彩开奖是多少钱| www.300894.com-彩票二等奖容易中么| www.375644.com-体彩兑奖需要哪些| www.567531.com-石家庄福彩兑奖流程| www.640421.com-彩票那回事-| www.801306.com-摇骰子彩票江苏快3| www.878632.cc-江西体彩咨询电话| www.972062.com-体彩排五走势图| www.cai2799.com安徽快三一定| www.lq69.com-微彩网可靠吗| www.m83.cc-竞彩输的倾家荡产| www.45pz.com-中福福彩-| www.693.cm-福彩3d百位杀号| www.4642.org-2块钱的彩票| www.02600.com-魔方彩票苹果| www.89682.com-三月足彩赛程| www.051877.com-9万彩票下载地址| www.148053.com-体育彩票25选5| www.238369.com-趣客站网彩是什么| www.316256.com-中国竞彩店怎么申请| www.388805.cc-发彩公司系列染膏| www.532795.com-体彩七彩星中奖规则| www.620192.com-怎么区分釉下彩| www.689818.com-新浪微彩票官网| www.766661.com-彩乐糖果有限公司| www.873215.com-四川体彩中心地址| www.956108.com-体彩足彩竞猜网| 天天彩票www.ttcp88.co| www.gc17.com-网络购彩合法平台| www.xg88.cc-七彩投资是真的吗| www.15vz.com-22彩票app骗子| www.753.mobi-彩神8lv-| www.4675.vip-两块钱的是什么彩票| www.9942.pw-网上买快三怎样买| www.66237.com-时时彩大平台| www.024952.com-甘肃快三预测神器| www.097259.com-中华公益彩票时报| www.162111.cc-汇彩网能赚钱么| www.267281.com-6701彩票网-| www.352001.com-中国彩票骗局27亿| www.433217.com-齐鲁彩票开奖时间表| www.525365.cc-长春黑彩最新新闻| www.624677.com-妖气网彩色本子| www.692230.com-瑞诚彩票合买平台| www.767870.com-旺彩全国开奖大全| www.873434.com-四川体育彩票中心| www.937280.com-湖北彩条布厂| www.988444.com-广东福彩领奖流程| www.cp821.cc-玩快三能赢钱么| www.kw12.com-体彩排三近十试机号| www.d09.top-五百彩票开奖| www.32af.com-贵州多彩宝免费下载| www.0473.pw-彩票1216con| www.6967.xyz-杏彩彩票官方网站| www.18722.cc-足彩14场胜负彩| www.59246.com-福彩3d讲座-| www.027583.com-棒棒彩票是骗局吗| www.100241.com-互联网禁止销售彩票| www.162366.com-i4场足彩-| www.262683.com-吉林省福彩中心主任| www.345673.com-彩漫福利本子| www.421773.com-体彩竞猜篮球胜负| www.516389.com-中发彩票怎么邀请码| www.580325.com-上海彩票弃奖排行榜| www.652157.com-怎么买海南私彩| www.778465.com-釉中彩餐具有毒吗| www.863841.com-999彩票网合法吗| www.924958.com-江苏体彩七位数预测| www.972174.com-体育彩票官方软件| www.bu63.com-甘肃快三豹子预测| www.sb12.com-体彩独胆预测| www.03ra.com-彩铅唯美风景画教程| www.66hg.com-神龙彩票下载安装| www.0575.link-万博博彩怎么样| www.20233.com-彩吧论坛首-| www.58252.cc-安装天空彩票| www.018399.com-下载快三摇奖器| www.079492.com-大发快三押注| www.142942.com-彩8平台怎么样| www.216548.com-彩票数字组合规律| www.282786.com-高手彩坛网-| www.402413.com-连中彩票快3| www.504206.com-兼职代买彩票被骗| www.567080.com-起了彩票大发快三| www.629026.com-17彩票下载-| www.690126.com-香港668彩票| www.758368.com-彩票999官网下载| www.884730.com-重庆肘时彩开奖历史| www.958853.com-说彩2019-| 幸运彩票www.5095z.com| www.bk19.com-教人买彩票骗局甜头| www.qw81.com-时时彩投资计划| www.05jl.com-水溶性彩铅画| www.67gz.com-彩票游戏机说明书| www.0028.wang-彩票滚雪球怎么投注| www.7408.vip-色彩图片美术作业| www.18736.com-彩票33平台怎么样| www.55874.com-彩票快3走势图| www.93626.cc-山东福彩中心官网| www.040647.com-博彩业推广是干什么|