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.39875.cc-彩票巴士是真的吗| www.k24.biz-微信群北京快三大小| www.995490.com-91竞彩之家改名| www.6qf.com-单位发彩票中奖| www.143689.com-福彩3地图迷新彩吧| www.37197.com-彩票屠龙软件| www.180829.com-手机彩票软件排名| www.666650.com-套彩在中国犯法| www.wi91.com-306.com彩票| www.913801.com-欢迎光临台湾福彩| www.593656.com-七彩云染料电商| www.700961.com-彩票黑平台没法提现| www.798298.com-海南福彩额度| www.893128.com-9cb彩计划-| www.968121.com-希腊时时彩开奖软件| www.gy4.cc-福利彩票快三游戏| www.wf55.com-河北冀彩宝投注大厅| www.20iv.com-澳洲28彩票系统| www.138050.com-新彩网i新彩网| www.7017.vip-七彩官方网-| www.xs62.com-凤凰彩票是怎么回事| www.984513.com-彩八彩票c8com| www.3796.cn-七星彩论坛特区规律| www.46pb.com-老版本印象彩票| www.03jo.com-体彩弃奖-| www.422766.com-体彩机充值是什么| www.579753.com-体彩排3排5-| www.751684.com-中彩到哪里去领奖| www.867079.com-福利彩票世界| www.938353.com-彩票受害者-| www.989912.com-彩漂能去黄吗| www.ec91.com-彩票种类和玩法介绍| www.vy72.com-中彩吧靠谱吗| www.19sq.com-少女前线春田全彩本| www.86837.cc-竞彩陆慧明的微博| www.er83.com-玩大发快三赚钱| www.58687.com-山东福彩助手中彩乐| www.111617.com-时时彩对冲套利方法| www.213143.com-时时彩平台怎么搭建| www.657468.com-百宝彩票江西快3| www.968022.com-胜负彩开奖公告| www.5609.cn-彩票直通车网下载| www.996726.com-博友彩软件下载| www.gd69.com-彩票大发快3| www.51bv.com-足彩360过滤| www.91741.com-五百彩票网股票| www.873756.com-彩38官方网站| 众彩www.813230.com| www.qi27.com-广东福彩一开奖直播| www.447914.com-黄金海岸彩票平台| www.558466.com-快三豹子中奖多少钱| www.655240.com-爱彩乐专家推荐号| www.771809.com-多彩贵州酒店| www.871821.com-利彩5分快3-| www.288365.com-晨兴彩票网站| www.wz93.cc-湖北快三湖北快3| www.2360.net-七彩云南歌曲| www.9219.biz-e乐彩输钱-| www.97850.com-买时时彩软件| www.076717.com-韩国快三助手下载| www.161598.com-体彩领导-| www.062445.com-福利彩票预测最准确| www.152074.com-江苏省体育彩票中心| www.230704.com-234彩票官网| www.760669.com-快彩11选五开奖| www.964313.com-官方体育彩票专业版| www.cp251.com-吉林快三开奖助手| www.762915.com-天津快乐十分爱乐彩| www.869975.com-安薇快三开奖| www.939619.cc-福彩冂户网址| www.989101.com-时时彩2期计划网页| www.dk35.com-彩票7星彩规则| www.24pz.com-手机彩膜制作工具| www.968893.com-刷彩票流水靠谱吗| www.av44.com-福彩排列5开奖结果| www.f35.live-乐盈彩票是正规的吗| www.001798.com-七乐彩5拖5-| www.778474.com-彩20彩票下载安装| www.865577.com-彩票中奖最多多少钱| www.953719.com-竞猜足彩奖金计算| www.999394.com-彩票能在手机上买吗| www.dq11.com-共赢彩票网-| www.vn52.com-全天重庆分分彩计划| www.08xv.com-超级彩票助手苹果| www.66by.cc-爱米彩-| www.0151.vip-彩色近义词-| www.sj1.cc-江西体彩网-| www.se01.com-河南跑马彩票| www.01848.cc-专业博彩套利| www.01lh.com-甘肃快三垮度走势图| www.291001.com-体育彩票大乐透走势| www.479234.com-竞彩中5千多万大奖| www.127149.com-彩票大小单双怎么买| www.180699.com-老快三爱彩乐| www.069629.com-彩神争霸v11| www.059920.com-中央对福彩作弊事件| www.413291.com-彩票证书怎么考| www.826790.com-唯彩直播-| www.937291.com-下载云彩厅-| www.998876.com-汇彩娱乐平台| www.td0.com-安徽快三稳赚技巧| www.rf93.com-彩6苹果下载安装| www.019671.com-福彩网站下载| www.254069.com-779彩票-| www.859385.com-体彩历史开奖号码| www.32668.com-三分快三计划网址| www.80229.com-491彩票开奖结果| www.1cj.com-7f000盈彩网址| www.6670.org-体彩数字云平台| www.23592.cc-达人彩票首页| www.7655.loan-一张普通彩票的尺寸| www.309369.com-下载体彩扑克三| www.1160.tv-福彩3d名词解释| www.2670.pro-福彩74期开奖结果| www.356019.com-啥是玩彩-| www.458620.com-体彩世界杯竞猜结果| www.561666.cc-最佳阵容中奖彩票| www.635514.com-国内彩宝哪个品牌好| www.705385.com-怎么买篮彩-| www.771545.com-北京五分彩-| www.826373.com-933彩票赢钱不给| www.882485.com-一分彩票-| www.949826.com-九州彩票6769| www.988374.com-副利彩票机选| www.cp9600.com-旺彩苹果手机版下载| www.552273.com-大家赢彩票网合法吗| www.643826.com-爱购彩平台安全吗| www.725957.com-福利彩票3d全网搜| www.800980.com-彩票开奖太湖字迷图| www.862267.com-今福彩开奖-| www.911810.com-福利彩票快开型彩票| www.570928.com-台湾分分彩开奖网| www.668875.com-彩票领奖吧-| www.a26.net-福利彩票标识含义| www.003403.com-快三出大小的概率| www.68em.com-谨姝斯人若彩虹| www.160823.com-彩票天天乐登录| www.ch54.com-代玩幸运快三受骗| www.577580.com-如何才能破解快三呢| www.691236.com-易彩国际登录| www.817781.com-在线购彩票app| www.889378.com-98如意彩票网注册| www.947187.com-买彩票上瘾人的心理| 博亿彩票www.636by.com| www.jw01.com-彩铅画鹿-| www.505725.com-职业足彩玩家| www.569571.com-彩票中奖的民事纠纷| www.646518.com-竞彩学-| www.770700.com-3d福彩论坛| www.137824.com-尊彩彩票平台| www.ux7.com-华人彩票合法吗| www.se10.com-腾讯时时彩开历史| www.062670.com-买大小的彩票软件| www.990586.com-快三彩票是真的| www.837.date-彩票流水是什么意思| www.6310.me-36o彩票导航| www.874971.com-快三稳赚不配的方法| www.501928.com-福彩支付宝领奖| www.581097.com-丹麦足球竞彩联赛| www.209356.com-福彩排列五开奖| www.1541.com-彩票收藏故事| www.121425.com-竞彩足球新浪网| www.9483.cn-体彩排五太湖字谜| www.309398.com-韩国哪些地方卖彩票|