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.13wh.com-3d老虎彩报-| www.715751.com-精品计划彩票小助手| www.3939.live-足彩指数的返反率| www.74040.com-老梁说彩票完整视频| www.956331.com-七星彩开将结果| www.27oh.com-12500万彩票| www.095538.com-多彩贵州网公司待遇| www.613569.com-体育彩票11任选| www.962119.com-下载中国体育彩票网| www.30877.com-多盈彩票平台官网| www.273038.com-鑫彩网彩票是真的吗| www.357805.com-美国彩票破解方法| www.455978.com-新加坡有几种彩票| www.553665.com-足彩比赛延期公告| www.501722.com-体彩最大的数| www.573019.com-意甲2018足彩网| www.83434.com-买彩票英语作文| www.aq27.com-快三胆拖怎么玩| www.5883.biz-结婚彩礼是什么| www.295886.com-快速查彩票开奖结果| www.972213.com-五分彩个位和值| www.kj11.com-手机选彩票软件| www.604891.com-有微信群玩时时彩| www.394321.com-足彩计算器竞彩网| www.098.in-彩票5行官方网站| www.yr30.com-体彩五规则-| www.99mp.com-体彩二元网走势图| www.40561.com-掌优彩票合法吗| www.022784.com-正规的彩票平台程序| www.164068.com-时时彩走势教学视频| www.552876.com-彩名堂类似分析软件| www.026026.com-福彩双色球攻略| www.978444.com-好彩客官方下载| www.790252.com-炫彩头像-| www.899279.com-福利彩票5分钟开奖| www.966920.com-玩黑彩有没有赢钱的| www.cai8567.com大发彩票下载安装| www.196108.com-北京快3爱乐彩| www.il57.com-陕西体彩-| www.383.live-电子彩票中了怎么办| www.5302.vip-彩票买3注多少钱| www.524493.com-买黑彩违法吗| www.207002.com-内蒙快三今天预测号| www.299716.com-e77乐彩手机登录| www.097290.com-今日福彩3d图纸| www.89295.com-六亿彩票官方网站| www.195033.com-上海体彩中心在哪啊| www.77uc.com-境外网络博彩上班| www.q94.com-彩迷天地双色球字谜| www.854.in-时时彩买号方法如下| www.508107.com-彩宝app苹果版| www.179085.com-快三毁人-| www.939910.com-开奖结果北京快三| www.mb1.com-内蒙快三遗漏| 小彩牛www.xcn1.com| www.841775.com-中国福利彩票32期| www.964515.com-中国体彩网电脑| www.89099.cc-彩9彩票手机版| www.24286.com-彩铅画苹果教程图解| www.030000.com-五洲彩票靠谱吗| www.193766.com-延边体彩中心| www.81754.com-昨天彩票开什么奖| www.125441.com-定胆彩票分析基础| www.252101.com-旺彩双色球老版本| www.xg32.com-宁夏快三50期| www.44tb.com-人人彩票计划下载| www.648595.com-福彩三滴d-| www.86090.com-彩涂卷多钱一米| www.17384.com-唯彩看球网站| www.886761.com-接博彩广告违法吗| www.962497.com-福彩双色球兑奖期限| 彩61www.653436.com| www.970.cc-七星彩六等奖几个号| www.208432.com-福利彩票快三宣传语| www.911715.com-爱彩乐网站可靠吗| 818合彩www.www.9889hc.com| www.845954.com-海南私彩合法吗| www.948137.com-福彩神牛预测| 金掌柜www.83993q.com| www.jg11.com-彩票狂人王成周| www.9377.org-新快报金钱豹福彩| www.55609.com-十字彩官方网站| www.69904.com-中国福彩彩票app| www.2363.xyz-彩票房开奖背景音乐| www.954717.com-彩票77官方下载| www.32ao.com-周六有什么彩票| www.567354.com-爱达彩票-| www.626729.com-邪恶道大全全彩| www.686863.com-快三摇奖模拟器| www.762958.com-红旗彩票网址是多少| www.825776.com-原彩-| www.886716.com-彩票大小技巧| www.948567.cc-福彩幸运二开奖| www.992191.com-体彩排列五玩法说明| www.ay07.com-百姓彩票网猜单双| www.732890.com-19050期体彩| www.794148.com-买黑彩票判刑标准| www.855482.com-深圳福彩网官方首页| www.906358.com-怎么劝沉迷彩票的人| www.960294.com-酷彩吧合法吗| 彩民网www.caim5.com| www.yb13.com-足彩app停售| www.098537.com-体彩一定牛数据| www.197066.com-华人彩票合法吗| www.259036.com-彩票规律分析软件| www.331383.com-七乐彩票一主页| www.425898.com-足彩最稳买法| www.525265.com-彩票福彩秘诀| www.596882.com-福彩3d兑奖-| www.666476.com-lcz9乐彩站-| www.746607.com-彩票23-| www.825500.com-广州满园就是鸣彩| www.895784.com-印象彩票官方网站| www.959891.cc-vr三分彩是什么| 500彩票网www.65707i.com| www.318053.com-福利彩票开奖星期几| www.386633.com-韩国彩票扣税| www.482838.com-有没有两位数的彩票| www.551171.com-app彩金-| www.614151.com-奇妙与彩票讲解| www.679073.com-彩票成瘾治疗| www.756445.com-竞彩网官方app| www.815633.com-排列五是福利彩票吗| www.882667.com-体彩大乐透中奖| www.948102.com-福利彩票的发行宗旨| www.985015.com-nba竞彩网-| www.cp3600.com-福彩店快三-| www.99338.com-时时彩模拟摇奖机| www.602838.com-彩世界是黑平台吗| www.jb61.com-福彩都有什么玩法| www.88653.cc-九彩彩票平台| www.8645.biz-彩票开奖`排三试机| www.122064.com-三分时时彩开奖数据| www.835302.com-日本好彩好抽吗| www.199575.com-福建快三推荐号| www.3001.org-上海福彩网网站| www.07788.cc-中彩那天生字| www.72494.com-彩天堂平台注册| www.525023.com-海门时时彩事件| www.615411.com-助赢彩票专家预测| www.1nj.com-l乐彩写真机| www.39588.com-北京单场彩开奖| www.89952.cc-福彩3d还在派奖吗| www.251422.com-好彩票手机客户端| www.314940.com-彩票怎么样算中奖| www.375635.com-菲律宾做时时彩代理| www.701100.com-彩票通cpt资讯版| www.778035.com-乐彩福彩字谜专区| www.839282.com-足彩欧赔及凯利指数| www.887805.com-诸葛精算足彩| www.940526.com-台北快三下载| www.977406.com-安徽灵璧彩礼价格表| 开心彩票www.367137.com| www.89251.com-注册30彩票金| www.062479.com-淘宝体育彩票| www.137194.com-八八彩票平台| www.225782.com-5亿彩下载-| www.312066.cc-红牛彩票破解| www.390024.com-彩经彩票邀请码| www.84fa.com-爱重彩-| www.380092.com-七乐彩中奖2个号| www.497887.com-福利彩票中将结里| www.549767.com-开足彩店-| www.603379.com-玛雅彩票游戏下载|