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.313785.com-福彩高手论坛| www.2036.org-二四六好彩免费资料| www.933928.com-今日彩票今开奖结果| 日彩网www.rcw8855.com| www.i46.net-约彩彩票开奖大厅| www.299159.com-吉林市彩票中大奖| www.376001.com-宣城体彩中心主任| www.365414.cc-齐鲁福彩群英会| www.520153.com-腾讯分分彩是真的吗| www.083767.com-智博彩票下载| www.48ik.com-七乐彩同尾数走势图| www.5845.vip-彩票奖票-| www.518597.com-安徽福彩主任| www.44np.com-彩掌柜app下载| www.52499.cc-伯爵彩票网是真的吗| www.52981.cc-时时彩停了怎么回事| www.644033.com-九州彩票代打| www.767768.com-福彩3d第72期| www.922835.com-福利彩票可以过户吗| www.996848.com-爱彩比分直播| www.349229.com-大乐透彩宝网| www.731240.com-天天好彩开奖时间| www.693163.com-辽宁福利彩票数字3| www.817586.com-体彩大乐透开将结果| www.rc7.cc-彩票快3开奖| www.552766.com-香港快三助手| www.531835.com-生命没有彩排| www.621178.com-秒速快三下载安装| www.702254.com-老鬼看盘足彩| www.795001.com-上海体彩店转让信息| www.54689.com-体彩9场胜负| www.500410.com-河内五分彩正规吗| www.923658.com-现在开彩票店| www.398674.com-众彩彩票真假问题| www.857989.com-手机买彩票的客户端| www.938216.com-开门彩双色球走势图| 大赢家彩票网www.54400o.com| www.984791.com-彩8福利网-| www.ra53.com-快三二不同号技巧| www.175377.com-安徽快三推荐号码| www.45641.com-福彩缩水工具| www.520812.com-分分彩后一杀两码| www.333777.com-大发快三大小| www.2021.in-6768彩票网平台| www.995921.com-新浪体育足球彩票| www.752139.com-游戏厅彩票有什么用| 天天中彩www.950606.com| www.920328.com-支付宝可以买彩票吗| 博乐彩票www.669773.com| www.115981.com-彩票保本翻倍模式| www.6893.cn-大丰彩app-| www.539602.com-线下彩票app| www.279529.com-时时彩大小预测| www.445330.com-亚盘足彩网500| www.218380.com-内蒙古快三豹子规律| www.320009.com-福彩三d字迷东方朔| www.885688.com-彩票开奖源在哪| www.960029.com-好彩彩吧-| 彩69www.022174.com| www.mj42.com-网上快三输了3万多| www.066442.com-8k彩票大发快3| www.374102.com-新浪手机彩票| www.6387.cn-三星彩票app下载| www.27600.com-彩票自动跟投软件| www.227738.com-体彩大乐透预测汇总| www.yt20.com-铜陵市体彩兑奖地址| www.456573.com-永盛彩票二维码扫描| www.581040.com-买时时彩犯法吗| www.671308.com-万彩动漫-| www.765718.com-彩票店要加盟费吗| www.871563.com-福利彩票快乐彩玩法| www.968049.com-中央巡视彩票| www.rk8.com-大发快三彩票骗局| www.vd49.com-pp彩票下载-| www.30ls.com-星期五买什么彩票| www.0397.cc-足彩购买平台| www.17656.cc-足彩任九全中多少钱| www.90928.com-日免红好彩价格| www.068571.com-全国开奖拼搏在线彩| www.153306.com-时时彩独胆稳定方法| www.968104.com-宝马彩票事件| 超级彩票www.970331.com| www.pl38.com-海南体彩app| 亿彩彩票www.yi432.com| www.397204.com-乐透型彩票分析| www.3959.biz-ck彩客网-| www.299319.com-安徽快三有假吗| www.628089.com-好彩堂来料彩中心| www.826582.com-体彩排列三谜语| www.955005.com-快彩助手11选5| www.vn42.com-澳洲时时彩精准计划| www.56ud.com-北海彩票-| www.326756.com-天霁网彩票论坛| www.e43.loan-马来三分彩是真的吗| www.302718.com-快彩王合法吗| www.598319.com-排列5e4彩吧| www.fj03.com-吉林快三是骗局吗| www.35qi.com-竞彩比赛结果查询| www.5317.online桌易彩票下载| www.53893.com-时时彩六码怎么倍投| www.148360.com-河北快三是真的吗| www.301867.com-湖北快三每日推荐| www.988669.com-期期中彩票ios| www.n12.link-伯乐海南快三| www.7795.net-玩彩票心德-| www.543561.com-体彩票面怎么看| www.661756.com-彩app28-| www.769388.com-买彩票就这几招微盘| www.24307.cc-大发时时彩开奖| www.686916.com-中彩那天词语| www.421893.com-彩票求带-| www.539688.cc-福州福彩领奖地址| www.612756.com-丹东彩票谜语图| www.805962.com-甘肃快三开奖公告| www.gb08.com-时时彩计划网| www.wl40.com-豪彩下载-| www.577919.com-更多精彩的视频| www.671028.com-网上怎么玩彩票| www.811989.com-乐彩论坛网址| www.896876.com-今天广西省快三彩票| www.981439.com-足彩任选九投注技巧| www.jw5.com-甘肃快三遗漏数据| www.773766.com-彩票排列五开奖查询| www.853345.com-体彩二十选五开奖| www.909086.com-亚博彩票是骗局吗| www.974198.com-广西福彩有几种玩法| 500彩票www.501274.com| www.799960.com-怎样在手机上买体彩| www.863155.com-下载彩票77软件| www.907896.com-快三猜大小规则| www.956703.com-彩票网上模拟选号器| www.992362.com-大发快三心得体会| www.cp7891.com-内蒙福彩-| www.278249.com-彩票256软件| www.az42.com-上饶体彩中心| www.573055.com-时时彩网购-| www.r87.com-快三怎么看豹子| www.914993.com-时时彩注册送58元| 500彩票网www.607995.com| www.82yb.com-澳门三乐彩开奖公告| www.028962.com-玩快三的技巧和秘诀| www.345641.com-福彩中奖在哪里领| www.zl54.com-安徽快三破解安卓版| www.22ig.com-香港703彩票网| www.361717.com-晶彩拍照手机| www.822577.com-台湾彩虹台直播源| www.65622.com-七星彩电脑选号工具| www.so1.cc-体彩图标-| www.yd12.com-福彩快三推荐号码| www.345297.com-彩票黑平台曝光网址| www.399113.com-今天彩神通金码| www.525808.com-时时彩开奖应用软件| www.387234.com-北京实时采彩走势图| www.497541.com-首彩63-| www.664513.com-卡通人物彩铅画图片| www.087090.com-乐福彩票网-| www.139429.com-盈丰彩票-| www.201746.com-利彩助手-| www.262015.com-河北快三输了几十万| www.316375.com-22彩票app下载| www.335065.com-沈阳福彩中心地图| www.14ij.com-体彩11选三-| www.22751.com-彩票软件哪个是真的| www.792233.cc-福利彩票44期3d|