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天

知道了
百盈PK10 www.118616.com-彩票app购买时间| www.575780.com-体彩试机号3o期| www.068358.com-彩神通官方网| www.226405.com-河北燕赵福彩排列七| www.474544.com-竞彩足球任选14| www.593575.com-阳光七彩采购平台| www.707038.com-快三分析真的吗| www.948349.com-现金彩票游戏平台| www.cai7779.com福建快三开奖走势图| www.25lr.com-分分彩后二组选技巧| www.082796.com-众信彩票靠谱吗| www.9893.biz-幸运彩是不是骗人的| www.91697.com-好彩香烟怎么样| www.297103.com-贵州省福彩中地址| www.8264.tv-时时彩大小遗漏数据| www.155333.com-足彩混合投注怎么玩| www.776523.cc-浙江省福彩中心电话| www.6921.me-七彩阳光寓意| www.57528.com-易盈彩票注册| www.402242.com-快三独胆赔率| www.345648.com-手机盈彩彩票版下载| www.517312.com-金码日历七星彩| www.920593.com-信博彩票合法吗| www.cp3357.com-1分快3是什么彩票| www.54bg.com-菜6菜彩票-| www.7038.cm-竞彩足球能买篮球吗| www.045877.com-彩51官网下载| www.790.cm-凤彩网今日彩票指南| www.614996.com-卖彩票的地方叫什么| www.842658.com-福利彩票中心在哪里| www.909468.com-唯彩会彩票-| QQ彩票www.89894s.com| www.655238.com-海南体彩直播现场| www.07rq.com-不喜欢刚力彩芽| www.452505.com-体彩泰安投注站| www.592270.com-大喜彩票-| www.693128.com-彩票中大奖概率| 凤凰彩票www.5091c.com| www.903752.com-万豪福彩app| www.cg11.com-360彩票购彩大厅| www.11967.com-辽宁福利彩票数字3| www.069750.com-彩票跨度怎么分析| www.845933.com-私彩破案-| www.61hq.com-福彩开奖预测号码| www.02408.com-重庆福彩手机报网址| www.787932.com-对刷好彩票平台| www.cai4094.com福彩双色球开奖号码| www.yy12.com-合肥快三走势图势图| www.038872.com-澳门快三公式| www.971385.com-彩迷张专栏-| www.gm35.com-七乐彩兑奖对照表| www.11fk.com-新世界彩票平台| www.659374.com-腾讯分分彩杀码技巧| www.805770.com-彩票的行业类别| www.896941.com-广西福利彩票下载| www.993640.com-支付宝上能买彩票吗| www.df04.com-全民赢彩票-| www.009098.com-14人彩票造假事件| www.083932.com-智博彩票是真的假的| www.152206.com-万彩计划官网| www.wr70.com-好彩app0567| www.691186.com-手机如何买足球彩票| www.767850.com-中大奖的彩票网登录| www.964614.com-搜狐彩票资讯| 彩民网www.76520y.com| www.iz82.com-中国福彩双色球预测| www.c21.hk-黑彩举报电话是多少| www.51bj.com-足彩任9缩水软件| www.856.date-新浪竟技风暴彩票网| www.7413.com-常州体育竞彩店转让| www.559840.com-体彩大乐透直播在哪| www.642594.com-重庆时时彩几点关| www.838045.com-72彩票-| www.911158.com-福彩双色球规则介绍| www.968391.com-时时彩盈利15万| www.20fu.com-佬牛足彩今天的分析| www.859.cc-时时彩几把止损止盈| www.5502.net-彩虹岛w手游| www.563938.com-体彩竟彩开奖时间表| www.699578.com-新浪彩票nhk图表| www.791796.com-福利彩票兑奖网址| www.874537.com-安装吉林快三| www.251783.com-彩票每日存送| www.332406.com-海口彩票网图版下载| www.388094.com-华彩电梯-| www.469675.com-福彩3d矩阵藏宝图| www.542006.com-京彩app图片| www.729290.com-福彩3d开奖回查| www.826689.com-a3彩票可以买吗| www.19rt.com-得力彩票23993| www.392575.com-搜狐竞彩-| www.538444.com-彩票哪个品种奖金高| www.604774.com-盛源时时彩平台| www.667898.cc-福利彩票的主人是谁| www.733159.com-江苏彩票管理中心| www.800336.com-体彩排列五今天开奖| www.706984.com-好彩票官网2626| www.796976.com-彩博国际-| www.865918.com-彩票赌光-| www.922400.com-竞彩分析师招生| www.979336.com-旋子彩画手绘| www.cr5.cc-快三有没有挂| www.a55.org-淘宝彩票下载手机版| www.839609.com-dd福彩大发快三| www.940961.com-福利彩票任三| www.990360.com-彩14-| www.8152.wang-爱彩彩网站是多少| www.73914.com-快三彩票网址| www.262312.com-顶呱刮彩票-| www.910217.com-找福利彩票群英会| www.4221.in-特彩吧开奖-| www.66995.com-河南安阳福彩5亿| www.105807.com-浙江省体育彩票| www.261601.com-时时彩职业玩家经验| www.uu5.com-彩票研究高手论坛| www.656565.com-北京福彩一等奖中奖| www.738991.com-大发快三作假吗| www.440289.com-会员登录_顶级彩票| www.555959.com-排列三家彩彩民论坛| www.639414.com-彩票店有没有刮刮乐| www.725710.com-买福利彩票时间| www.835885.com-彩专家计划网| www.7580.com-鼎隆彩票-| www.22927.com-手机购大乐透彩票| www.93377.cc-澳彩欧赔分析机构| www.7025.loan-竞彩篮球怎么打票| www.32360.com-爱彩人-| www.262626.com-河北快三跨度走| www.513368.com-湖南省体彩招聘| www.600455.com-时时彩贴吧-| www.745586.com-彩票计划导入潮信| www.844975.com-足彩任九场中奖奖金| www.1537.xyz-河南机器人彩票| www.27175.com-如何下载彩票2元网| www.86375.cc-三彩服饰加盟| www.080216.com-体彩大乐透投注方法| www.257696.com-购彩v-| www.351362.com-手机时时彩在哪玩| www.458001.com-2017海南私彩票| www.567733.com-阳光彩票官网登录的| www.660103.com-彩票预测软件准确吗| www.85ws.com-西安彩票一等奖| www.2881.in-香港hk百彩网| www.987.cx-来彩彩票下载安装| www.5938.xyz-江苏快三一定走势| www.12588.com-中乐彩75秒赛车| www.45097.com-彩票刷负盈利方法| www.835986.com-足彩大赢家缩水软件| www.dc62.com-人人中彩票封了| www.433.date-优信彩票可不可靠| www.081909.com-最新唯彩双色球宝典| www.4370.in-时时彩掌赢专家下载| www.26426.com-福彩3d报纸图在哪| www.60488.cc-重庆1.5分彩| www.012292.com-章鱼彩票暂停售彩| www.997906.com-乐彩吧3d折线图| www.of42.com-福彩开奖结果是| www.09ja.com-福彩3d?d走势图| www.3983.me-买竞彩哪个app好| www.615511.com-福彩3d胆码排顺| www.706810.com-时时彩预测下期号码| www.6962.me-599彩票平台| www.162911.com-128彩票网站| www.905515.com-世界杯足彩怎么投注|