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.543598.com-迅盈彩票靠谱吗| www.2406.cc-彩迷开奖网-| www.60310.com-彩票店老板自己做庄| www.049447.com-彩票教学视频| www.144217.com-足彩反着买-| www.232615.com-彩票怎么玩的| www.374331.com-大发1分快三计划| www.515002.com-国际彩妆加盟| www.609048.com-体育福利彩票| www.703268.com-万家彩票网和买| www.873149.com-洛阳体育彩票店转让| www.978547.com-彩8苹果下载软件| www.bn86.com-十一选五快彩下载| www.7857.pw-小鹿网络时时彩骗局| www.6718.biz-诚信彩app下载| www.1316.vip-106彩票网-| www.12518.cc-一分快三怎么买会赢| www.277077.com-几分钟的彩票| www.354722.com-彩赢家福利彩票| www.483409.com-汉代点彩瓷器| www.322210.com-九宫格与彩票的关系| www.877966.com-双色球中奖彩票照片| www.zf8.cc-福彩快三打法| www.02pn.com-万彩吧彩票开奖记录| www.95pj.com-多彩投众筹-| www.4573.cn-易彩乐下载官网| www.17323.cc-足彩对阵表分析| www.74974.com-网上买彩输了很多钱| www.065512.com-彩铅画简单图片| www.160700.com-排三乐彩网玄机图| www.303339.com-七彩集团连锁企业| www.637567.com-七星彩画规律| www.871664.com-足彩手机过滤软件| www.999199.com-下彩网手机版| www.im86.com-竟彩足球比分| www.19uf.com-第一次怎么买彩票| www.0021.org-快三用什么软件| www.18663.com-万家彩票网首页导航| www.100698.com-乐彩客app安卓| www.616831.com-体育彩票到期时间| www.530510.com-时时彩买号方法如下| www.631533.com-好彩头陈忠实的简介| www.53mm.com-高频彩调整时间| www.58lh.com-河内5分彩网址查询| www.3095.biz-特区七星彩票网| www.315137.com-爱彩乐湖南快乐十分| www.448066.com-彩中网开奖结果| www.948646.com-你们买彩票中过奖吗| www.4114.vip-七星彩局王奖表下载| www.fg8.com-福彩3d开奖号码| www.123540.com-江西快三怎么玩稳赚| www.230809.com-易网彩票下载| www.158851.com-龙江体彩大乐透查询| www.66257.com-福彩双色球先选号码| www.78722.cc-乐彩字谜论坛| www.119901.com-中国福利彩票排五| www.dc56.com-365彩票合法吗| www.533447.com-最简单的彩票是什么| www.742306.com-买彩票哪个软件好用| www.lu83.com-一分快三大中华彩票| www.gh73.com-三分快三计划准吗| www.12ao.com-彩票心水资料| www.744607.com-234彩票安卓版| www.00618.com-360网上购彩| www.180005.com-体彩大乐透规则| www.263835.com-柬埔寨5分彩走势图| www.345345.com-数字与彩票-| www.200016.cc-历史彩票开奖查询| www.665620.com-七乐彩38期-| www.778063.com-彩娃app下载| www.854306.com-多彩网彩票网页| www.922247.com-怎么成为足彩分析师| www.983867.com-福彩一等奖兑奖流程| www.ya6.com-668彩票大发快三| www.si27.com-聚富网彩票登陆| www.34tj.com-七星彩开了多少年了| www.54549.com-微信彩票骗局揭秘| www.677540.com-彩娃彩票可信吗| www.217709.com-网易彩票平台| www.544188.com-福彩3d图迷第一版| www.574102.com-中兴彩票平台真假| www.685938.com-浙江省快乐彩票开奖| www.791472.com-彩易网3d字谜| www.866473.com-昨天体彩号-| www.958704.com-5分钟彩票平台| 亿万彩票www.095005.com| www.go24.cc-好彩烟多少钱一包| www.77404.com-众乐彩app下载| www.033116.com-中信积分换彩票| www.764887.com-一分快三软件app| www.4764.cc-永盛彩票官-| www.899651.com-幸运彩基本走势图| www.981482.com-中国足彩竞彩网| www.ki56.com-福彩选号器下载| www.08969.cc-微信能购买福利彩票| www.1626.org-时时彩出豹子征兆| www.816916.com-有人彩票中过大奖吗| 九五彩票www.949410.com| www.716756.com-唯美古风彩铅画| www.909949.com-福彩3d彩界小少爷| www.uh.cc-福彩票开奖查询结果| www.f64.pw-海南私彩4位取码| www.97ga.com-彩排反义词-| www.257378.com-福彩快三黑彩| www.058932.com-机选彩票能中大奖| www.02703.com-亚彩会平台注册网址| www.op13.com-彩票361登陆| www.05le.com-老梁说彩票那件事| www.88dx.com-雅玛彩票网站| www.0339.loan-中彩票手机客户端| www.5559.date-彩票谜语大全及答案| www.9646.cm-赢网彩票-| www.1617.cn-乌兰浩特体彩中心| www.259108.com-竞彩好用的app| www.9051.biz-福彩太湖谜语总汇| www.806237.com-体彩彩票开奖号码| www.911802.com-瑞彩网用户注册| www.968478.com-77彩票靠谱吗| 爱彩www.235127.com| www.129443.com-福彩三胆高手| www.805420.com-河内时时彩官网地址| www.0736.net-盛兴博彩-| www.288037.com-体彩合买-| www.400307.com-沈阳体彩11选5| www.586374.com-福彩3d九宫格| www.875024.cc-三地红五图库彩吧| www.7910.vip-福利彩票猫腻| www.609373.com-99时时彩网址| www.114552.com-齐鲁风彩开奖| www.484808.cc-彩票app那个好| www.567546.com-苏州市福利彩票| www.072779.com-体彩中心李家福| www.174211.com-山东体彩11选5| www.273138.com-彩票造假案-| www.336321.com-专业高频彩计划网| www.396516.com-怎么画彩虹-| www.960157.com-新彩吧字谜图谜总汇| www.cai568.com-福建快三今日开奖| www.403321.com-下载七星彩或规律| www.530239.com-彩票历史对比| www.603102.com-彩虹6号muzi| www.856191.com-百盈彩票贴吧| www.wq65.com-彩中彩一旦拥有| www.28np.com-福彩杀号定胆布衣| www.733.in-中国竞彩网论坛首页| www.6455.me-a4彩票网-| www.309535.com-澳门有福彩快三么| www.395609.com-新手如何买3d彩票| www.10zd.com-送108元彩票| www.8563.xyz-牛彩分分快三| www.311116.com-公布中国湖南福彩网| www.4304.cc-鑫亿彩app骗局| www.17939.com-竞彩如何跟单更安全| www.1127.cc-竞彩打单-| www.733329.com-老快三开奖号码| www.800951.com-今年的彩票是多少号| www.871044.com-体彩7星彩合买| www.943948.com-703彩票被黑了| www.979615.com-计划彩票是什么意思| 大赢家彩票平台www.695093.com| www.35025.com-福彩三d摇奖机| www.186883.com-中彩网官网-| www.264567.com-彩票端作弊-| www.6194.biz-山东11选5爱乐彩|