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.511725.com-胜负彩九场奖金| www.131579.com-彩礼价格表-| www.61el.com-七乐彩周几开奖| www.140381.com-75彩票网址-| www.16822.com-下载e彩乐-| www.67398.cc-网络彩票输都是贪心| www.60108.com-分分彩后二口诀| www.818658.com-500万彩票旧版本| 凤凰彩票www.66652d.com| www.092325.com-双福彩票网-| www.2307.pro-福彩三d水果图| www.4285.vip-京东快彩能买吗| www.697702.com-香港本土彩票论坛| www.906217.com-彩色肉系动漫| 大赢家彩票平台www.108382.com| www.04608.com-在微信买足彩| www.kt24.com-上海福利彩票双色球| www.717.la-腾讯时时彩后二双胆| www.32114.com-万优彩票登录| www.104758.com-福牛牛彩票官网| www.78679.cc-新加波天天彩资讯纲| www.121292.com-谁有微信彩票聊天群| www.265701.com-3d中彩网走势图彩| www.437272.com-上海体彩福彩下载| www.605554.com-彩票榜官方邀请码| www.756681.com-全民乐彩票登录| www.922875.com-福利彩票站如何转让| www.oj5.com-甘肃快三app| www.6jx.cc-顶呱刮彩票中国红| www.0318.name-重庆彩票店转让58| 七乐彩票www.qilc3.com| www.63vj.com-彩票投注正规app| www.889530.com-七乐彩票不给提现| www.774165.com-彩票大乐透玩法规则| www.54ty.com-彩29苹果版下载| www.536422.com-时时彩大小开奖结果| 易盈彩票www.7793f.com| www.985505.com-时时彩组三组六平刷| www.030531.com-体彩七星彩综合走势| www.237081.com-体彩足球竞彩| www.339248.com-区块链彩票概念股| www.445610.com-上海福彩基诺试点| www.544580.com-cc彩球网集团| www.680382.com-中彩情报网-| www.qk23.com-福彩和值表-| www.54348.com-3d福彩图片-| www.698845.com-画彩铅工具-| www.058480.com-彩界老大彩票今晚| www.141262.com-七星彩论坛2027| www.674722.com-足球胜负彩中奖故事| www.775992.com-彩乐网c.49pw| 中国福利彩票www.08588z.com| www.350193.com-l乐彩写真机| www.320827.com-足球彩票第二期| www.391862.com-彩票之家233| www.523579.com-时时彩收费软件购买| www.605043.com-快三怎么拿盘| www.23qp.cc-韩国快三彩票计划| www.3000.tv-18彩票首页-| www.711951.com-彩礼是什么时候给| www.819555.com-如何得到彩票大数据| www.923549.cc-彩票中奖者的自述| www.981892.com-新彩彩票注册送18| www.es61.com-幸运快三破解器下载| www.202.cm-彩铅动物画图片大全| www.254171.com-彩乐糖果-| www.015680.com-体彩七星彩规则| www.122928.com-福彩3d实用的书籍| www.238075.com-时时彩最准推算公式| www.323859.com-彩78可靠吗-| www.396911.com-体彩星期五什么开奖| www.532234.com-大悲咒求财中彩票| www.719736.com-福彩快三安卓版| www.838996.cc-竞彩跟单软件哪个好| www.983794.com-广东福彩兑奖流程| www.gl5.com-快三全天计划网页版| www.055778.com-福彩是要填几位数| www.234985.com-安卓彩票下载| www.385605.com-体彩排列3开奖信息| www.561130.com-百姓彩坛心水三区| www.707652.com-乐彩cc33app| www.821552.com-乐彩网犯法吗| www.899391.com-福彩体彩开奖结果| www.976656.com-西平县结婚彩礼多少| www.e75.club-七乐彩走-| www.791846.com-熊猫彩电电视机| www.883207.com-彩友多软件合法吗| www.954572.com-浙江体育彩票6加1| 网易彩票www.26163t.com| www.939582.com-如何审计福彩| www.996006.com-彩通彩票-| www.fh44.cc-快三对子技巧| www.zo19.com-14胜负彩开奖公告| www.176979.com-快三下载手机版下载| www.253802.com-中国福彩网走势图| www.270588.com-彩票app1.0-| www.624228.com-彩票33号平台| www.711723.com-百号彩票下载安装| www.781131.com-网上玩彩票输了| www.859323.com-体彩快乐扑克走势图| www.926381.com-江西时彩开奖记录| www.976348.com-河南体彩8选4开奖| www.ak41.com-河南快三投注分析| www.239268.com-所有彩票网站大全| www.338811.com-谦喜彩票登录页| www.ia98.com-68彩票是真的吗| www.c24.org-福彩试机号金码| www.50pj.cc-哪里下载足彩软件| www.768278.com-彩胜app-| www.385167.com-海口七星彩早版区| www.55156.com-快3彩票过滤软件| www.03400.cc-江苏快三需要倍投吗| www.712664.com-7星彩开奖结果yy| www.787994.com-足彩19042难度| www.861597.com-中原风彩-| www.911432.com-网易彩票开奖结果| www.969710.com-江苏体彩网彩票| 500彩票www.303479.com| www.et29.com-上海体育彩票| www.wj32.com-大发时时彩预测软件| www.488477.com-上海双色球快三| www.772225.com-时时彩混选52注| www.853997.com-五分时时彩走势分析| www.933579.com-东彩是正规的平台吗| www.18of.com-临汾彩票店微信群| www.67hb.com-彩票网线路检测| www.796181.com-怎样提高彩票中奖率| www.577297.com-快三要害死人的| www.665793.com-彩娱乐平台登录| www.750267.com-全民中彩是可靠吗| www.815600.com-排列五是体彩吗| www.879840.com-大发购彩是真的吗| www.851622.com-时时彩智能分析软件| www.920444.com-体彩大乐透投注技巧| www.974521.com-体彩大乐透的规律| 大赢家彩票www.599645.com| www.617.in-重庆时时彩网站预测| www.4114.net-购买海南七星彩源码| www.9233.com-鸿鑫乐彩是什么| www.293.net-领彩票-| www.176377.com-快三333后面| www.262491.com-237彩票-| www.349699.com-刘谦预言彩票| www.3933.date-玩彩独胆王软件| www.85679.com-篮彩加时赛怎么算| www.579059.com-圣地彩开奖139| www.56oz.com-新狼彩票网-| www.0566.pro-神秘玩彩人-| www.11573.cc-金羊网晚晚好彩| www.312853.com-最新彩票网站| www.392183.com-彩票弃奖新闻| www.358504.com-苏州福彩网福彩公告| www.444424.com-台湾福彩奖眷| www.559609.com-彩购平台app下载| www.865027.com-天天福彩快3骰子| www.13423.com-模型竞彩-| www.59761.com-彩虹哥布林-| www.778039.com-汇彩网在哪里下载| www.851866.com-辽宁12选5爱彩乐| www.147813.com-购彩堂是什么| www.765049.com-海南七星彩早版图库| www.707375.com-足球竞彩专家推荐号| www.088174.com-2345彩票网下载| www.ak07.com-七星彩现场直播|