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天

知道了
彩01彩票 www.365935.cc-水溶性彩铅画教程| www.808023.com-新浪竞彩2串1推荐| www.972232.com-大众彩票合法吗| www.ko09.com-快三守号一天不出来| www.619958.com-彩票是邓家-| www.326586.com-今日七星彩安然预测| www.9594.xyz-精彩十分兑奖分用图| www.022355.com-6118彩票软件| www.562812.com-34期福彩-| www.892383.com-买高频彩输了30万| www.982958.com-网络彩票输50万| www.6661.in-非凡全天时时彩计划| www.965296.com-uu彩票跑路-| www.fa45.com-三d七星彩票图纸| www.6pm.com-姜山胜负彩冷门解析| www.710979.com-约彩365骗人| www.832901.com-牛彩3d字迷汇总| www.910540.com-彩票机选有中奖的| www.972347.com-福彩体彩-| www.cai3499.com内蒙古快三网| www.576433.com-七彩娱乐官网| www.92fp.com-百万彩票是正规平台| www.2860.in-超级七星彩视频直播| www.28417.com-快三走势图湖北省| www.7378.in-彩八仙官网-| www.51217.cc-重庆时时彩乐娱网址| www.55ep.com-体育彩票好做吗| www.3309.pro-彩色装饰画猪| www.30ju.com-色彩对比作业| www.797755.com-易彩人工计划| www.049168.com-永利棋牌彩票| www.865012.com-人人彩票网登录| www.960523.com-注册送彩正规平台| www.cai2377.com牛湖北快三走势图| www.mk04.com-福彩3d字谜画谜| www.891045.com-彩票用语谜材| www.ee44.com-赚佣金彩票代打| www.1143.in-彩蛋画-| www.325701.com-福彩3d缩水工具| www.747464.com-时彩下载手机版| www.90tu.com-上党沁县李彩英古书| www.263517.com-福彩的品种-| www.371636.com-瑞彩彩票安卓版下载| www.595660.com-鑫彩彩票平台登入| 500彩票www.52072g.com| www.570850.com-上海福彩15选5| www.250717.com-中彩彩票注册| www.393052.com-彩铅画静物图片| www.489876.com-山鹰团队彩票| www.225737.com-英国时时彩-| www.365352.com-大乐透杀号彩乐| www.509769.com-内蒙古体彩竞彩| www.275610.com-亚博足彩app苹果| www.395476.com-竞彩2串1稳赚模式| www.728328.com-美女时时彩骗局| www.05964.com-推店彩票合法| www.007584.com-体彩中奖号码七位数| www.294522.com-河北快三连开30期| www.894940.com-网页版体彩天下| www.967708.com-买彩票怎么能中奖| 亚洲www.978315.com| www.mt50.com-春秋彩票app下载| www.n31.cn-京彩怎么下载呀| www.049692.com-彩票算法大揭密| www.17rm.com-新浪购彩平台登录| www.964676.com-竞彩足球百度百科| www.305454.com-彩票可以多买几期吗| www.378.date-福彩如何算中奖| www.oi62.com-体彩大乐透奖金查询| www.879117.com-新浪彩票3d走势| www.92031.com-西宁体彩中心地址| www.nx60.com-玩快三真的能赚钱吗| www.17yb.com-彩金项链断了能接吗| www.99hd.cc-福彩3b天牛图库| www.5588.space-彩票双色球开奖日期| www.843.cc-如意彩票专家计划| www.zm63.com-ip代玩彩票骗局| www.81xs.cc-扬州公道体彩中奖| www.18um.com-35彩票开奖-| www.573379.com-澳门彩票真人| www.296163.com-吉林快三微信群号| www.7sc.cc-宝马彩票是真的假的| www.137954.com-快三中奖规则及奖金| www.342984.com-神彩奕奕是什么生肖| www.612009.com-福彩投注站末位淘汰| www.d04.org-福建体彩开奖直播| www.499360.com-平台私彩-| 13e彩票www.812870.com| www.026627.com-百姓彩票手机版下载| www.881571.com-利记博彩怎么样| www.211192.com-河北快三开奖奖金| www.145982.com-310足彩专家预测| www.779003.com-彩票假球案-| www.165587.com-排列三彩票票花详解| www.zv28.com-福彩11选5走势图| E彩堂www.9818w.cc| www.b94.com-体彩天下-| www.4154.org-七彩缓中集团| www.750752.com-中彩规律-| www.904183.com-好看的休闲快三| www.73zw.com-环球彩票真的假的| www.089253.com-彩6买哪个版本| www.251893.com-双色球旺彩预测专家| www.761784.com-河北彩票开奖杳询| www.842563.com-体彩公益金申请| www.905760.com-澳客竞彩足球直播| www.978389.com-福彩快三表-| 大赢家彩票平台www.981090.com| www.ih75.com-中彩彩票网站是多少| www.123761.com-刮刮彩技巧-| www.530008.com-丨7500乐彩网| www.a95.club-3d水彩-| www.027313.com-香港五分彩开奖官网| www.036888.cc-福彩3地图迷总汇| www.60ua.com-大庄家彩票黑钱吗| www.637536.com-上海体彩站点电话| www.712528.com-辽宁体彩电话投注| www.800176.com-中国禧利彩票| www.870301.com-博友彩江苏快三首页| www.925529.com-谁知道旭彩网怎么样| www.973854.com-福彩官方网-| 众乐彩票www.231844.com| www.950846.com-五分彩走势-| 澳客彩票www.277ak.com| www.797629.com-福彩3d今晚试机号| www.877433.com-彩票猜图迷-| www.943967.com-体彩天下是骗局吗| www.982919.com-买彩票算不算赌博| www.cp383.cc-网上福彩快三怎么玩| www.ie00.com-中国体彩网官方下载| www.75pe.com-旋子彩画名词解释| www.646747.com-北京职业彩民| www.739630.com-北京快三公交时刻表| www.859099.com-彩票图查询-| www.953348.com-竞彩足球310| www.lg2.cc-江苏快三专家推荐号| www.695396.com-足彩m串n-| www.770472.com-重庆时时彩| www.838696.com-盘球网竞彩篮球推荐| www.896516.com-火星彩票-| www.953438.com-乐彩网是坑人的吗| www.997256.com-哪个软件可以买足彩| www.091968.com-百万彩票中的骗局| www.279322.com-三d福彩千禧开机号| www.367265.com-梦幻彩铅画手绘| www.458198.com-今日福彩三的字谜| www.ox40.com-娱乐快三走势图| www.05oz.com-水溶性彩铅画教程| www.39at.com-山东彩民中奖| www.088.in-十六夜全彩母系短篇| www.132224.com-360安全购彩大厅| www.376412.com-七星彩规律长局| www.28dp.com-6491彩票网址| www.460101.com-懂彩帝靠谱吗| www.575411.com-美国最近彩票大奖| www.686070.com-彩票限号一般会开吗| www.974627.com-南方彩票-| www.622113.com-五福彩票平台靠谱吗| www.5803.vip-足球竞彩第一论坛| www.155791.com-泜彩电子走势图| www.087901.com-58彩票老版本| www.75858.cc-体彩彩票应用| www.050916.com-快三单注奖金多少| www.004272.com-彩票就是无底洞|