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.hm2999.com| www.606958.com-中彩票规律-| www.769281.com-好彩网怎么玩| www.987398.com-234彩票官网电话| www.743488.com-天天中彩网骗人吗| www.729857.com-彩票彩客旧版237| www.20186.cc-竞彩彩票网合法吗| www.573015.com-ok8us福彩门户| www.665118.com-体彩现场直播| www.755602.com-旺彩专家推荐| www.862793.com-购彩软件下载| www.45ya.com-龙彩科技有限公司| www.2691.top-福彩3d优势图表| www.72916.com-北京福彩快3销量| www.020409.com-彩12下载-| www.188653.com-快三屠龙和跟龙| www.39qo.com-福利彩票销售厅图片| www.t37.net-恒大彩票注册| www.vj67.com-双色球彩票规则介绍| www.24806.com-儿童星空彩铅简笔画| www.583579.com-全民足彩彩票下载| www.659402.com-七星体彩中奖号码| www.803475.com-七星彩明月珰番外一| www.907903.com-七星彩大公鸡定头尾| www.988014.com-彩票51中彩怎么样| www.cp85.com-甘肃彩票十一选五| www.x10.org-彩神5分快3赚钱吗| www.154022.com-福彩365安装| www.226203.com-买彩票的技巧| www.269226.com-长城彩票平台靠谱么| www.413965.com-喝彩一词的由来| www.474047.com-国家福利彩票| www.618845.com-下载小炮彩票| www.729547.com-今天的3d丹东彩图| www.807980.com-彩票一注多少钱| www.894402.com-信彩计划-| www.978192.com-彩钢围挡安装视频| www.2868.org-昨天的福彩-| www.tg07.com-大发快三预测下期| www.30lz.com-软件控制极速时时彩| www.440510.com-3d专家杀号彩乐乐| www.6512.cc-体彩即开-| www.19855.cc-新体育彩票走势网页| www.584793.com-58彩票公司在哪吗| www.16651.cc-福彩可以网上兑奖吗| www.822933.com-3d牛彩推荐号| www.928722.com-七星彩最新奖表| www.998227.com-七星彩版区头中王| www.xp42.com-彩民要求赠送彩票| www.35sf.com-多彩数据快乐12| www.618845.com-下载小炮彩票| www.703991.com-三位数彩票开奖| www.785848.com-七星彩预测最准软件| www.879703.com-481体彩开奖结果| www.956395.com-玩彩有人赢过吗| 500彩票网www.97655d.com| www.89912.com-彩票店在线接单| www.142811.com-彩虹8网络彩票| www.309306.com-马来西亚乐和彩下载| www.408136.com-中彩票一等奖知乎| www.126460.com-智慧彩自动投注| www.878675.com-彩神通代理会员码码| www.cp08.com-新快三-| www.087.in-体彩排列五彩宝网| www.7681.xyz-彩票兑奖查询平台| www.59926.cc-竞彩足球串关玩法| www.095263.com-足彩微信公众号排名| www.8596.org-大乐透好久停止购彩| www.pq01.com-快彩助手是什么情况| www.07cb.com-彩铅画麋鹿星空| www.69sc.com-彩票至尊宝典破解版| www.815251.com-福彩视频票-| www.0595.date-缺一门彩票机| www.650987.com-精致彩笔画-| www.758826.com-买彩票中奖的新闻| www.829528.com-高频彩票分析仪| www.934037.com-乐彩彩票安卓版下载| 中华彩票www.9149j.com| www.211695.cc-快开型彩票的弊端| www.20vg.com-彩票号怎么选| www.058.red-8体彩屋是骗局吗| www.4660.xyz-大发快三购彩大厅| www.3qb.cc-怎么买中彩票被骗| www.126306.com-福利彩票中奖率很低| www.237164.com-体彩e球彩奖金规则| www.393330.com-用彩铅画眼睛| www.540729.com-福彩中奖彩票| www.656091.com-星彩代挂网-| www.738437.com-威信彩票app| www.808290.com-福彩新浪彩票| www.874162.com-老谢说彩白马彩票| www.965604.com-爱乐透彩票福彩体彩| www.gt3.cc-爱乐彩11选五| www.602602.cc-四季一分彩登录j| www.730281.com-鄂尔多斯体彩加盟| www.874713.com-湖北省体育彩票官网| www.993656.com-足彩第19044期| www.hn58.com-上海快三怎么玩选号| www.79pi.com-福彩了3d字谜| www.4196.org-七彩课堂语文电子版| www.20170.com-专业定制彩票软件| www.830149.com-盈彩在线注册| www.932422.com-购彩堂登录-| 豪彩VIPwww.30xw.com| www.jh68.cc-发彩网快三-| www.36891.cc-577彩票网站| www.883239.com-鸿彩网网址-| www.w77.com-福彩快三顺子翻倍吗| www.67zw.com-苹果酷彩吧下载| www.1685.net-排三乐彩网字谜图迷| www.48id.com-竞技彩票-| www.0738.cn-01彩票是怎么回事| www.7076.biz-湖南七彩集团招聘| www.680532.com-体彩排列三跨度表| www.ks49.com-中彩堂开奖现场| www.241169.com-北京快三第一牛| www.337863.com-福彩今晚3d得出啥| www.473448.com-福利彩票31期| www.3640.net-竞彩足球排行榜| www.88687.cc-河北快三是什么彩票| www.cai4722.com河南快三在线直播| www.906414.com-江西快三网投| www.825656.com-一分赛车彩票怎么玩| www.922092.com-彩票自动售卖机投资| www.996294.com-好彩店彩票靠谱吗| www.67jn.com-太原开彩票站怎么样| www.9897.cm-胜负彩中奖规则| www.90509.com-彩票彩虹店铺二维码| www.054585.com-幸运快三计划网页版| www.53zv.com-2008年彩票大奖| www.3669.win-彩票大师apk| www.12955.cc-运盛彩票注册| www.77075.com-彩吧助手彩票| www.655405.com-m8彩票关了吗| www.425590.com-竞彩推荐预测14| www.1823.cm-体彩前三直开奖结果| www.7758.me-体彩最年轻中奖者| www.22576.com-杏耀分分彩骗局真相| www.07346.com-万博app怎么竞彩| www.020456.com-下载彩c38-| www.306365.com-01彩票下官方| www.45qc.com-有没有人玩中博彩票| www.1399.cm-微信彩票在哪里兑奖| www.7425.cc-世界杯对体彩的影响| www.9521.cm-求海南私彩投注网| www.906336.com-黑彩网站怎么盈利的| www.8100.biz-七星彩平台源码| www.6816.in-周六是体彩还是福彩| www.48996.com-足彩竞彩单场| www.846069.com-支付宝对彩票| www.70hu.com-旺彩社区是什么意思| www.267573.com-三d彩票高手经验| www.954524.com-彩宝cb8下载| www.023210.com-正牌彩票大全| www.187861.com-体彩玩法介绍| www.564066.com-中昂彩云台地址| www.292368.com-彩票的专业术语| www.71623.com-福利彩票快三换时间| www.059578.com-快三遗漏湖北| www.569806.com-彩88开奖-| www.9420.vip-开彩吧天下彩特彩吧| www.113427.com-快三赌大小单双软件| www.421304.com-福彩3d中奖历史| www.09st.com-旺旺彩有中奖的么|