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.801996.com-长春彩票兑奖地点| 大赢家彩票平台www.307281.com| www.tk58.com-福彩快三浙江| www.061.date-乾隆粉彩九桃天球瓶| www.089933.com-彩票代理怎么找客户| www.91867.cc-中彩那天导入语设计| www.00178.cc-彩钢板围挡的价格| www.60148.cc-精彩玩法画面刺激| www.035652.com-体育彩票猜比分规则| www.598027.com-体彩22期-| www.757877.com-号佰彩票开奖| www.6734.cn-手机app彩票苹果| www.55414.cc-哪个彩票是6个数字| www.69324.com-韩国福利彩票开奖| www.456509.com-彩票三d图纸今天| www.617165.com-没彩票有码给兑奖吗| www.698028.com-河北保定锦乐快三| www.445616.com-彩金项链能卖多少钱| www.32972.com-体彩第19044期| www.024851.com-极速赛车彩票技巧| www.152583.com-彩神iii是什么| www.296234.com-河南省幸运彩走势| www.011406.com-福利彩什么时候开奖| www.153319.com-快三走势图下载| www.253165.com-好彩妹心水-| www.28zr.com-彩票之家233| www.895537.com-排三走势图乐彩网| www.994899.com-代玩彩票提供帐号的| www.cy55.com-大发时时彩免费计划| www.q31.net-新浪世界杯彩票| www.50uo.com-福彩双色球超级助手| www.488401.com-甘肃快三彩控图| www.380045.com-山东11选5彩控| www.264.live-品牌彩妆在哪里加盟| www.830835.com-cp彩票下载苹果版| www.938342.com-非法彩票网站受害者| www.998233.com-七星彩加急版一夜谈| www.as74.com-广西快三福利彩| www.rc67.com-海南4十1彩票| www.26qt.com-福彩3d大神群| www.626.tv-58福彩下载-| www.976583.com-平顶山订婚彩礼| www.ug2.com-足彩8串1-| www.we37.com-河南省体彩中心电话| www.23bf.com-132彩票应用| www.757778.com-中彩网信誉-| www.845680.com-网络彩票模拟摇奖机| www.923421.com-彩票吃票属于诈骗| www.991069.com-海口七星彩彩版| www.rh5.cc-1分快三精准计划| www.sn72.com-河内五分彩app| www.373925.com-福利彩票中几个数字| www.945233.com-大连买彩票几点截止| 大众彩票www.328229.com| www.pn12.com-精彩十分福利彩票| www.190107.com-彩票开奖查汹| www.324125.com-体彩中奖号-| www.443123.com-网易红彩到底怎么玩| www.576448.com-杭州市福利彩票网站| www.651592.com-体彩站点怎么挣的钱| www.771515.cc-时时彩五星固定五码| www.845996.com-博纳彩票是合法的吗| www.905167.com-江苏快三高手讨论群| www.969003.com-刷彩票流水犯法吗| www.ad98.com-新华彩票推荐| www.rr56.com-500彩票极速| www.029900.com-众彩网排列五走势图| www.6796.vip-时时彩什么是龙虎和| www.54392.com-彩票新平台送彩金| www.744496.com-下载彩虫-| www.873981.com-福彩3d今天布衣图| www.948019.com-彩票到哪里兑奖| www.995959.cc-足彩18086任九| www.dc53.cc-约彩彩票app下载| www.sq59.com-上海彩票店转让| www.00058.cc-全国彩票结果| www.102036.com-彩天下彩票正规吗| www.74vj.com-今天福彩杀码号| www.21nb.com-职业彩票人的收入| www.504744.com-彩票中奖王-| www.18547.com-彩票那期中奖人最多| www.95172.com-孕妇彩妆十大排行榜| www.315660.com-彩虹糖果机-| www.889720.com-体彩独胆双胆预测| 乐迎彩票www.616971.com| 彩多多www.78949e.com| www.lj60.com-彩网导航-| www.566970.com-网上购彩正规平台| www.185995.com-广西福彩快3| www.274683.com-时时彩任二同号技巧| www.361505.com-六冠彩票是什么平台| www.303573.com-36选7的好彩1| www.382597.com-胜负彩19004期| www.784876.com-乐优炫彩苹果下载| www.882223.com-狂三本子全彩下载| www.950591.com-乐彩客手机版| 网易彩票www.088wy.com| www.570237.com-彩票开奖i查询结果| www.688024.com-江苏新福彩快三号码| www.785676.com-七星彩开奖一结果| www.873138.com-中国体彩下载安装| www.935701.com-旺彩预测软件手机版| www.981114.com-投诉福彩-| www.bc6.com-彩票计划-| www.625796.com-天天爱彩票双色球| www.699646.com-彩神pk10安卓| www.790234.com-炫彩微商下载| www.863142.com-智慧彩挂机下载| www.914117.com-彩乐园2-| www.964375.com-新2彩票网站| 辉煌彩票www.2875d.com| www.ik86.com-长沙所有体彩投注站| www.127498.com-彩虹天界app| www.526775.com-时时彩固定5码| www.nk20.com-足彩推荐好的app| www.04wm.com-竞彩足球进球数推荐| www.76xg.com-彩票有谜语吗| www.1110.top-彩票包抄法-| www.897017.com-快三和值选号法| www.979408.com-好彩紫绿双爆| www.cp5510.com-快三免费稳定计划| www.526390.com-彩票坐庄是什么意思| www.xj45.cc-湖南快三开奖结果| www.28ku.com-体彩几位数字| www.367621.com-简单彩铅樱花树画法| www.235763.com-足彩分析预测| www.343282.com-时时彩赔20倍| www.816918.com-哪些人容易中彩票| www.921445.com-中国福利彩票破解| www.969381.com-福彩3d绝密胆码| www.80te.com-国丰彩票官网| www.134279.com-什么便利店有绿好彩| www.2048.xyz-k8彩票网靠谱吗| www.8306.cn-彩友吧彩民朋友的家| www.244256.com-海南体彩下载| www.vl58.com-北京全天时时彩计划| www.53ea.com-彩票行家·com| www.930500.com-彩票兑奖规则是| 万彩网www.wcp777888.com| www.sv45.com-633cc彩票33| www.2pi.com-鸿彩快三合法吗| www.47fo.com-彩票2元网3d杀号| www.668133.com-福彩的钱去哪里了| www.756118.com-谁有御彩轩网址| www.876645.com-3b彩吧i助手| www.930262.com-彩票双色球计算方法| www.973410.com-cf彩虹哥官方网站| 鑫亿彩www.035059.com| www.ed95.com-彩神邀请码最新| www.te83.com-时时彩技术分享| www.095218.com-彩票兑奖不接受采访| www.335849.com-吉林快三有赢钱的吗| www.lm88.cc-彩票应用大全| www.98611.com-比特币分分彩结果| www.559092.com-彩宝彩票客户端| www.888966.com-中国体彩自动售票机| 网易彩票www.093wy.com| www.550889.com-彩票分析神器| www.2647.cc-c777彩票官网| www.16774.com-l辽宁福彩-| www.069075.com-彩票新闻网-| www.465.mobi-彩票兑奖经历| www.323346.com-七彩开奖结果今晚| www.388267.com-4567彩票下载|