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天

知道了
9彩注册 www.27468.cc-彩票霸主-| www.421446.com-网上去哪买彩票| www.460577.com-7728彩票邀请码| www.561001.com-天涯时时彩论坛| www.690510.com-澳客网竞彩足球赛果| www.49cc.cc-彩票中了5万怎么领| www.8863.org-北京大学彩票研究所| www.w66.link-3d开机号南方双彩| www.121916.com-河北省福彩快三玩法| www.002421.com-美国彩票专家霍华德| www.363096.com-彩虹纹产生的原因| www.3429.cc-ba彩票网站-| www.748888.com-苏州老快三开奖结果| www.852766.com-时时彩漏洞稳赚| www.917619.com-彩虹世界app| www.985502.com-唯彩会姜山冷门独家| www.yo5.com-五分快三彩票玩法| www.322621.com-竞彩神单-| www.48fv.com-体彩排列五图标| www.911100.com-浙江温州快三| www.cp6877.com-北京快三遗漏数据| www.939940.com-123彩票合法吗| 818合彩www.www.9889hc.com| www.728669.com-大乐透预测号中彩网| www.428116.cc-最好的足彩缩水| www.188693.com-彩票专业术语| www.339464.com-彩78彩票软件下载| www.521901.com-贵州十一选5爱彩乐| www.677657.com-快三和值跨度对| www.787778.com-106幸运彩票| www.870640.com-快彩乐首页走势图| www.943358.com-网易彩票买不了| 13e彩票www.596960.com| www.6280.top-百度体育彩票论坛| www.25276.com-彩铅初级教程绘画| www.68953.com-盈彩吧是不是真的| www.024425.com-彩票网站哪个靠谱| www.083885.com-体彩十分钟开奖技巧| www.161915.com-铭发彩票是骗人的吗| www.380390.com-合买彩票群起啥名好| www.930298.com-吉林省彩票快三遗漏| 大玩家彩票www.cp208.com| www.080521.com-彩八app下载| www.195009.com-3d彩报3d彩报| www.288649.com-彩票达人合法吗| www.027599.com-易彩国际是黑平台吗| www.157255.com-足彩冷热指数怎么算| www.316262.com-22彩票下载-| www.517895.com-迷彩服图片-| www.185595.com-分分快三是否真的| www.304555.com-快3派彩官方网站| www.729377.com-最新彩票走势图首页| www.875435.com-下彩彩票官方下载| www.3759.cc-今晚海南七星彩头尾| www.pi32.com-19052足彩-| www.579435.com-高棉时时彩开奖| www.722701.com-41c彩票安全吗| www.859498.com-福彩3d走势图| www.945120.com-福建省福利彩票开奖| 彩票5www.550419.com| www.df12.com-俄罗斯6位数彩票| www.822168.com-中国胜负彩500w| www.2495.cc-玩彩app提现| www.791426.com-排3最大值彩经网| www.4546.in-7星彩19039期| www.15045.cc-财富赢家报七星彩图| www.na28.com-网络售彩举报| www.439393.com-快三后二直选怎么玩| www.018223.com-773彩票app-| www.21826.cc-充8元送88彩金| www.797674.com-购彩99-| www.916831.com-老9购彩票-| www.cp8577.com-上海福利彩票网| www.52632.com-分分彩后三-| 非凡彩票www.77210l.com| www.311839.com-3d彩报库吧-| www.090208.com-福利彩票双色规律| www.167828.com-快三预测号-| www.255110.com-时时彩专业版| www.117283.com-快三投注-| www.513633.com-重庆时时彩5星复试| www.628200.com-新浪体彩直播视频| www.139174.com-福彩3d输惨了| www.193121.com-长春逸彩快三查询| www.765282.com-大众彩票网骗| www.236996.com-浙江体彩中心| www.388222.com-湘潭华彩置业| www.80599.com-腾讯彩票网官方端口| www.430.tv-368彩票平台| www.030448.com-大乐透杀一红彩宝贝| www.111893.com-淘彩app是骗局吗| www.216.me-好运来大发快三官网| www.058924.com-彩93彩票app| www.593577.com-七彩格子最新消息| www.876678.com-快三刷流水技巧| www.6156.top-香港马彩开奖网站| www.38083.com-红彩app直播下载| www.47qy.com-夭下彩网高手网| www.6220.vip-快乐三分彩怎么下載| www.060697.com-ag788爱购彩| www.y42.me-彩神通会员怎样办理| www.119894.com-宝马彩票彩平台| www.17aw.com-新浪彩票七乐彩| www.2060.vip-彩虹台在线直播网址| www.35727.com-体彩竞彩店-| www.137889.com-宝发彩票app| www.385520.com-天子彩票-| www.376935.com-qq时时彩计划| www.316884.com-七乐彩开奖号| www.3828.xyz-足彩专家推荐软件| www.11606.cc-高频彩套利是真的吗| www.073637.com-彩6最新版本| www.569085.com-福利彩票报纸大全| www.11xa.com-贵宾彩票-| www.626.tv-58福彩下载-| www.911932.com-天天彩选四历史号码| www.979012.com-二四六好彩门户| www.rz08.com-极速快三单双技巧| www.262921.com-网赚彩票团队qq群| www.134226.com-中彩网首页彩票| www.27621.cc-彩票经典理论| www.042806.com-彩票平台广告词| www.9127.online七乐彩往期开奖数据| www.9934.com-深圳彩礼一般多少钱| www.935870.com-纵彩彩票一分钟快三| www.495954.com-如何看彩票图| www.582031.com-齐中网彩天下| www.675656.com-新浪体彩传足| www.910046.com-云南昆明彩砖| www.cai7168.com福彩快三开奖助手| www.387544.com-梦见彩票没中奖| 大赢家彩票www.590981.com| www.242401.com-黑龙江大庆福彩快三| www.596824.com-四亿彩票官方| www.015732.com-手机怎样买七星彩| www.1009.in-高频快开彩票游戏| www.678028.com-双彩网预测-| www.754422.com-彩经推荐-| www.807918.com-燕赵福彩20选五| www.867786.cc-福彩彩神通今日快报| www.920053.com-福建快三玩法介绍| www.971834.com-泰安体育彩票电话| www.cai29.com-内蒙古快三开奖结果| www.657143.com-好彩网红姐3d预测| www.748303.com-彩票快3作弊器| www.814446.com-博彩国际平台手机版| www.899812.com-快三有几种玩法| www.986549.com-567彩票安全吗| www.gt09.com-今天好彩一开奖号码| www.2330.vip-福彩3d字谜推荐号| www.th56.com-体彩外围是什么意思| www.327398.com-连红彩票app入口| www.138399.com-鸿彩网靠谱吗| www.239923.com-网上买彩票输了几万| 彩票8www.cp8004.cc| www.0889.win-福利彩票预测技巧| www.725757.cc-中国福彩开结果| www.223900.com-e球彩走势-| www.057546.com-玩快彩怎样才能赚钱| www.216229.com-恒博彩票-| www.308630.com-安徽彩票快3| www.170595.com-甘肃快三正文推荐号| www.652680.com-竞足彩票开奖结果| www.791025.com-快乐双彩玩法规则|