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.022373.com-广西快三开奖结果牛| www.89zz.com-lol红蓝博彩| www.4718.biz-彩票中大奖的咒语| www.256607.com-天天中彩官网app| www.049998.com-昨天体彩3开奖号码| www.008011.com-今天七乐彩开奖| www.837091.com-找竞彩高手-| www.978123.com-彩钢道路围挡| www.636548.com-新浪爱彩高频走势图| www.792858.com-彩票兑大奖流程| www.438899.cc-万字开彩成绩中奖| www.543528.com-北京中国体彩报| www.619055.com-彩票破损还能兑奖吗| www.719812.com-体育彩票500万| www.946778.com-彩色沥青混凝土路面| www.67108.com-邢台福彩中心地址| www.091533.com-河南各地彩礼排行| www.170440.com-吉林快三值和走势图| www.276908.com-动物福彩-| www.87so.com-刮刮乐彩票透视器| www.77js.cc-七乐彩十大专家汇总| www.z00.top-做彩神代理挣钱吗| www.072896.com-亿元彩票app| www.13876.cc-跟投彩票会中| www.74th.com-幸运彩票怎么样| www.061.link-彩宝是正规的吗| www.239613.com-快购彩票三-| www.341059.com-福彩双色球机兑奖| www.443662.com-完美彩票cp828| www.00687.com-万彩吧专家推荐| www.34rl.com-彩票的故事-| www.431670.com-足彩中奖率多少| www.9620.cc-非彩色-| www.63797.cc-快乐彩胆拖对照表| www.074055.com-体彩p3专家杀码| www.819852.com-特区彩票平台| www.895666.com-新彩票深圳快三| www.974041.com-网上体彩投注| www.cai2255.com甘肃快三开奖结果| www.60653.com-昆明体彩中心兑奖处| www.268969.com-彩票2元网走势图| www.363947.com-彩票3d单式怎么玩| www.661574.com-竞彩8串16-| www.484803.cc-快乐五分是什么彩种| www.582060.com-9928彩票网-| www.473666.cc-福建彩票几点开奖| www.102945.com-广东福利彩票好彩2| www.827617.com-大奖三分彩怎么玩| www.900763.com-吉林快三代理犯法吗| www.966549.com-k8彩票55kk| www.cp6123.com-中彩彩票网-| www.4368.biz-快彩网是什么| www.02840.com-彩票危害-| www.2383.org-旺彩七星彩开奖结果| www.639184.com-体彩密测电话号码| www.42gm.com-在哪里买足彩| www.984654.com-八号彩票是不是真的| www.814859.com-竞彩客户群-| www.967727.com-买彩票输5万| www.ug24.com-福利彩票奖金池| www.56dq.com-2356彩票-| www.813910.com-安徽福利彩票中奖| www.cai9777.com河北快三统计图表| www.389130.com-安徽彩票11选5| www.639021.com-中国福利彩票是谁管| www.719218.com-彩吧3d迷图第三版| www.797228.com-凤凰彩票真坑人| www.874336.com-吉林快三开始结果| www.967240.com-竞彩胆拖玩法介绍| www.cp3767.com-北京快三怎么算中奖| www.738149.com-七天彩大发快三| www.840682.com-足彩概率差之间分析| www.913580.com-澳客彩票下载| 天天彩票www.7782o.com| www.56727.cc-利盈彩票登录| www.359916.com-体彩p3断组-| www.431389.com-什么是葡京彩票| www.537002.com-体彩店名字-| www.618232.com-我要看体彩排列三| www.709501.com-aa1882大发彩| www.950167.com-互联网禁止出售彩票| www.cai7666.com江苏快三号码开奖| www.0978.cn-体彩排五合买网| www.04qx.com-众盈国际时时彩| www.25539.cc-彩客彩票购彩失败| www.749665.com-外国500彩票| www.823722.com-利彩彩票走势图| www.0288.tv-彩票什么样的人能中| www.8511.cn-时时彩怎样赢钱| 彩宝www.911888a.com| www.889704.com-凤凰彩票提款时间| www.970720.com-腾讯分分彩时时开奖| www.cp7332.com-单双大小彩票| www.092221.com-福彩logo图片| www.193565.com-至尊彩10分快3| www.61064.com-彩吧vip输惨了| www.887263.com-天天购彩网怎么样| www.667311.com-有中过彩票的吗| www.767011.com-希望彩票邀请码| www.845411.com-竞彩彩票安全吗| www.938687.com-福彩通平台是真的吗| 三九福利彩票www.99968z.com| www.fi31.com-中国福利彩票贵州| www.151517.com-中彩网手机买彩票| www.366096.com-万彩吧网上购彩| www.932788.com-购彩堂注册-| www.991047.com-uu快三代理-| www.ah36.com-5分彩开奖结果| www.265303.com-中国福彩开奖直播| www.410896.com-唯彩会官方下载| www.624968.com-豪彩官网注册账号| www.770358.com-彩票站干黑彩| www.591812.com-博彩牌照-| www.199001.com-河北快3彩票| www.422111.com-有没有关于彩票的书| www.638484.com-色彩风景照片素材| www.954484.com-福彩92期开奖结果| 大玩家彩票www.84499z.com| www.167059.com-中国福彩官方app| www.743388.com-什么叫做购彩计划| www.815074.com-3d彩吧预测总汇| www.141486.com-福彩3d字谜凤彩网| www.52634.com-看彩票开奖结果| www.524545.com-生辰八字算彩票号码| www.811241.com-彩票万能三码| www.907227.com-河内1分彩开奖结果| www.966247.com-亿彩网到底是真是假| www.cv87.com-自学入侵私彩网| www.k58.club-七天彩娱乐官网网址| www.36tn.com-火星时时彩计划| www.01982.com-中彩票的福报| www.368728.com-体彩今日开机号码| GO彩www.can80.com| www.905716.com-快三时时彩登录网址| www.907153.com-福利彩票是几位数| www.966966.com-新彩网彩票走势图| 彩票58www.585560.com| www.033066.com-320彩票-| www.5pm.com-天天分分彩开奖结果| www.69423.com-竞彩计划表下载| www.863563.com-广西福彩官网手机版| www.934449.com-彩票托照片哪里的| 金凤凰彩票www.loll3.com| www.399043.com-七星彩最常开的号码| www.gv71.com-最新彩票app| www.634029.com-滕州市七彩教育集团| www.32yr.com-美国百万彩票网| www.78eh.com-彩乐园2免费下载| www.30319.com-高频彩是骗局| www.c3.com-好彩彩票是骗局吗| www.926786.com-天津福彩中心官方网| 500彩票www.547577.com| www.vv00.cc-彩票怎么看冷热号| www.395872.com-抖音彩虹滑梯在哪| www.207079.com-至尊彩app网站| www.292922.com-智慧彩客户端| www.373723.com-足球竞彩最新对阵| www.447886.com-福彩梁博说彩今天| www.538631.com-彩吧彩报银海版| www.607890.com-下载彩友多-| www.680879.com-澳門彩票-| www.757203.com-实时彩出对子概率| www.951967.com-彩票快8-| www.994078.com-彩票分析大师下载|