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天

知道了
1分快三 www.mf6.cc-内蒙快三官网开奖| www.975164.com-福彩快三套路| www.qi81.com-36选7好彩1玩法| www.78531.com-八仙过海韩湘子艳彩| www.359912.com-七星彩是一元一注吗| www.627606.com-豹赢彩票最新版本| www.774470.com-799彩票彩金软件| www.861546.com-甘肃福彩领奖地址| www.984112.com-58彩票安卓版链接| www.52267.com-今日竞彩专家推荐号| www.022283.com-排列三体彩三句话| www.791607.com-福利彩票选4| www.318925.com-抚州市体彩中心位置| www.3299.live-顶呱刮中奖彩票图片| www.ms57.com-打开中彩网首页| www.099997.com-22彩票官网网址| www.03qe.com-天空彩票开奖日期| www.091802.com-体育彩票最新骗局| www.187007.com-快三数字杀头尾| www.179941.com-手机买彩票网站| www.8681.top-快乐彩杀号定胆| www.818468.com-彩乐汇骗人吗| www.949999.com-彩票概念新华网| www.jb5.com-彩票平台绑卡送彩金| www.545532.com-明日安徽快三预测| www.709859.com-谁有体彩店微信号| www.4044.top-竞彩奖金计算| www.9530.vip-海南私彩如何包码| www.12de.com-欢腾彩票app| www.692527.com-体育彩票足球规则| 彩票大家乐www.21202n.com| www.28bx.com-全彩本子app| www.981800.com-毕节彩民中奖| www.ap26.com-基诺型彩票规律| www.028906.com-下载亿彩堂-| www.ly08.com-好彩妹是什么电视剧| www.6289.biz-新湖北竞彩快三| www.5213.org-体彩湖南幸运赛车| www.9873.in-哪里能查足彩销量| www.049920.com-两元彩票网排列三| www.376308.com-铜陵体彩兑奖中心| www.043199.com-网上买世界杯足彩| www.072938.com-中国彩票第一大奖| www.ly60.com-清乾隆各种釉彩大瓶| www.056687.com-梦大奖网海南七星彩| www.332289.com-卖福彩提成多少| www.539103.com-旺彩平台注册吧| www.751733.com-瑞彩网注册-| www.962337.com-福彩1360亿元| www.ia39.com-聚彩彩票骗我一万五| www.73984.com-捷豹彩票系统源码| www.025538.com-7乐彩开奖结果| www.502719.com-彩友多哪家店铺人多| www.52373.com-什么是好彩网| www.299419.com-福彩开奖信息| www.11ej.com-时时中彩票安全吗| www.1111.love-竞彩武林风二串一| www.7hi.com-接手彩票店需多少钱| www.547818.com-易彩网邀请码是多少| www.905573.com-芒果彩票-| www.73030.cc-福彩都有多大得奖| www.261491.com-彩票送38彩金大全| www.512669.com-彩铅画秋景-| www.941353.com-hk百彩网免费料| www.5cg.com-3d字谜新彩网牛彩| www.33667.cc-彩宝典-| www.169236.com-安徽快三跨度走势| www.590751.com-378彩票下载| www.722998.cc-快三包号一共多少注| www.845580.com-湖南亿元大奖彩票| www.960036.com-彩票七天乐-| www.au90.com-彩神争霸llapp| www.u38.club-赢彩网站可靠吗| www.017.net-955彩票邀请码| www.8736.vip-高频彩开奖数据| www.66389.cc-福彩3d藏机诗专辑| www.062849.com-实时彩票犯法吗| www.182028.com-快三彩票规则| www.301290.com-苹果彩票下载| www.401896.com-七星彩2019书| www.526130.com-足球世界杯彩票规则| www.262297.com-中国福利彩票怎么样| www.360999.com-福彩三d天天彩报纸| www.458016.com-彩票11选5北京| www.541946.com-海南彩开奖下载| www.603197.com-六个彩开奖结果查询| www.668066.com-澳门5分彩合法吗| www.732952.com-中国江苏体育彩票| www.801996.com-长春彩票兑奖地点| www.883123.com-多彩投众筹是否合法| www.952574.com-福彩短信投注双色球| www.c1.org-68彩票-| www.93373.cc-百家欧赔澳彩指数| www.272918.com-刷福彩的流水是什么| www.233784.com-戒彩票贴吧-| www.123772.com-体彩任选三开奖| www.860791.com-七星彩南国论坛了之| www.987014.com-彩02彩票极速彩票| www.550.cm-五分彩彩票计划| www.69224.com-500竞彩历史数据| www.vt41.com-广西福利彩票走势图| www.t80.cc-中国购彩网-| www.cai378.com-520快三官网| www.0hb.cc-易彩网3d字谜| www.028613.com-彩宝彩票cb8| www.900368.com-e乐彩官网下载| www.47ch.com-大乐彩开奖号码一人| www.367098.com-彩铅星空图片| www.w98.com-时时彩在哪里买安全| www.508307.com-彩票收藏最新动态| www.660828.com-乐投彩票app| www.757171.com-西宁体育彩票高频彩| www.876149.com-1516cc彩票| www.956925.com-北京福彩网怎么开奖| www.na.com-快三赚钱方法| www.yz09.cc-福彩3d四码的应用| www.89836.cc-日本买彩票-| www.790989.com-彩宝网双色球开机号| www.081339.com-中彩票咒语-| www.339530.com-九鼎彩票下载安装| www.543256.com-彩票481属于什么| www.630805.com-彩票密籍-| www.371028.com-时时彩票投注软件| www.334546.com-彩票提现账户异常| www.390851.com-台州福彩申请| www.01ae.com-彩虹的形成原因| www.83mo.com-中金彩网站-| www.886361.com-大家赢彩票app| 55世纪www.995sj.com| www.zg15.com-买彩票幸运怎么选号| www.826762.com-太阳2彩票能玩么| www.894833.com-优博2时时彩客服| www.957655.com-下载彩乐透-| 星际www.930xj.com| www.328674.com-彩之网下载-| www.hv76.com-乐彩网3d折线| www.765325.com-快三一分钟书籍| www.907667.com-福利彩票4选4| www.993003.com-竞彩官方app| www.kf88.com-下载1516购彩| www.7nc.cc-美食彩铅画图片大全| 凤凰彩票www.3479j.com| www.58rm.com-福彩开奖造假的视频| www.785801.com-领航彩-| www.mi04.com-青海今天开奖快三| www.019650.com-双色球彩迷图下载| www.788155.com-360胜负彩-| www.881923.com-彩票诈骗帝王彩票| www.983662.com-快三最晚是几点钟| www.1026.org-彩票开奖结果彩报| www.2314.vip-好彩香烟绿色报价| www.8979.top-牛彩一句定三码原创| www.683990.com-体育彩票更新| www.233372.com-彩乐汇合法吗| www.386868.com-6698彩票真假| www.948069.com-众彩网排列三杀码| 澳客彩票www.109ak.com| www.424999.com-七彩语文杯-| www.958406.com-中彩手彩票客服电话| www.gx36.com-老猫今天出彩3d| www.11lc.com-越南河内5分彩下载| www.93191.com-105彩票安卓下载| www.121422.com-招聘彩票计划导师| www.196530.com-体彩开奖是多少号|