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.139815.com-盈彩吧安全吗| www.iv06.com-足彩竞彩新浪投注| www.571.org-福彩开奖资料大全| www.1521.online赤峰体彩中心电话| www.699454.cc-福彩选4开奖号码| www.26fm.com-彩票站投入多少钱| www.yl61.cc-大乐透彩票号多吗| www.217562.com-安徽快三今天推荐号| www.770711.com-时时彩三星中奖规则| www.873654.com-六盘水体育彩票中心| www.952606.com-彩k-| 大赢家彩票www.602957.com| www.rk10.com-福彩基诺玩法| www.37pz.cc-七星彩神针定尾版| www.192167.com-快三开奖软件下载| www.298602.com-今天福彩出奖号码| www.374738.com-彩票王中王ww| www.502278.com-多彩投佣金-| www.234722.com-河南体彩官网| www.350390.com-彩色笔记本键盘| www.57159.cc-快三拉花教学| www.15205.com-时时彩计算公式| www.656664.com-欧洲杯胜负彩| www.748971.com-好彩1基本走势| www.829127.com-彩9苹果下载| www.910339.com-收彩报彩吧图库| www.971886.com-福彩三第开奖号| www.cai3434.com重庆时时彩停售了吗| www.485522.com-彩票代购最新排行榜| www.360020.com-想中彩票的说说| www.450504.com-六合同彩开奖结果| www.548544.com-138彩票大厅| www.621906.com-彩虹8-| www.692583.com-泰国彩票的标识| www.624747.com-香港彩富网48cf| www.725607.com-彩票还有真的吗| www.lh66.cc-中彩娱乐网站| www.295931.com-湖北快三杀号技巧| www.3577.xyz-南方双彩下载彩| www.91ww.com-玩彩心态非常重要| www.pp94.com-宁波快乐12彩| www.56785.cc-利博彩票软件| www.992159.com-快三改规则-| www.pj96.cc-北京市快三开奖查询| www.57mr.com-体彩开奖结查询| www.2636.in-时时彩出租最新| www.346464.com-彩神uv使用-| www.527691.com-华彩网登陆-| www.652422.com-乐合采竞彩-| www.737011.com-彩20-| www.812512.com-买彩票有啥诀窍吗| www.883464.com-彩网在线视频| www.953016.com-九州彩票网页版| 39彩票www.3933f.cc| www.4694.cc-大发快三开奖走势图| www.33576.com-上海福彩快三赚钱吗| www.016554.com-足彩分析师排行榜| www.637371.com-彩虹三无人机出口| www.714258.com-体彩竞彩网手机版| www.793658.com-正规彩票注册| www.865831.com-凤凰私彩平台| www.934517.com-时时彩0到9对码| www.994435.com-非法彩票给谁举报| www.bz12.com-福彩3d精华布衣1| www.wc98.com-更多精彩视频| www.001971.com-彩票店故事-| www.289266.com-彩票大小和单双技巧| www.355252.cc-唯彩杀号-| www.454211.com-地球纪元彩虹之门| www.057059.com-出售彩票源码| www.7677.top-七七彩票-| www.092214.com-kc一分彩-| www.208178.com-彩票图-| www.158383.com-新加坡天天彩资料| www.4805.live-彩虹6号腾讯| www.16700.com-竞彩资讯竞彩网| www.9863.in-中外彩画-| www.6174.vip-牛彩3d字谜汇总| www.35387.cc-中国福建体彩官方网| www.871126.com-傲赢彩票app| www.60146.com-彩票收税多少| www.19488.cc-体彩时时彩票走势图| www.77152.cc-任选九场竞彩网| www.025808.com-体彩五-| www.165068.com-体彩排列三凤雏预测| www.819831.com-中彩票的坏处| www.445068.com-体育彩票列五走势图| www.555055.com-托梦彩票-| www.qt02.com-福彩中指-| www.1711.in-一彩票网-| www.91220.com-日景彩烟价格| www.165022.com-彩票真是害人| www.266242.com-北京快三稳赚技巧| www.440790.com-澳彩风情免费资料| www.541438.com-彩票平台怎么做代理| www.610519.com-重庆彩钢瓦安装价格| www.839505.com-体彩票七星开奖公告| www.904013.com-牛蛙彩票下载安装| www.975600.com-天天爱彩票官方网站| www.cai2227.com河北快三遗漏直| www.a42.in-九千万彩票主页| www.49cv.com-大家赢彩票网正规吗| www.0625.org-海南私彩网投| www.18029.com-有没有三位数的彩票| www.43589.com-民彩网彩民提供可靠| www.22417.com-e彩彩票-| www.476143.com-福彩3d今晚推荐号| www.579217.com-天下彩现场开??| www.670523.com-福彩3d独胆大师| www.788525.com-365凤凰彩票| www.954024.com-福利彩票软件靠谱么| www.501782.com-8彩票链接-| www.612176.com-足彩加推荐怎么样| www.693057.com-微信口袋彩票店| www.788337.com-足球彩票19039| www.884618.com-百度买彩票-| www.974283.com-彩虹旗代表什么意思| www.cp5358.com-福彩快三3下注技巧| www.235816.com-快三彩票规则介绍| www.3541.top-彩票中二等奖难吗| www.69qa.com-微彩站app发单| www.33595.cc-足彩19020期| www.89649.com-网上玩黑彩犯法么| www.201869.com-152彩票网-| www.660826.com-体彩开奖软件| www.2335.pw-博彩怎么打广告| www.jd14.com-中国足彩竞猜| www.c61.top-福彩三d和值走势图| www.2535.win-饰彩意思-| www.0681.xyz-厦福利彩票站点申请| www.65894.com-自制彩票模拟器| www.075006.com-深圳福彩技术| www.576836.com-网络彩票怎么解绑卡| www.690637.com-3d牛彩字谜-| www.8005.cm-时时彩一帆风顺规律| www.373672.com-竞彩足球怎么玩| www.914499.com-网上彩票有什么漏洞| 日彩网www.rcw8833.com| www.259644.com-京东快彩是什么情况| www.698453.com-嘉兴福彩招标| www.828084.com-盗窃彩票怎么定性| www.626018.com-富华彩票app下载| www.739407.com-合发彩票888下载| www.301733.com-上海快三app下载| www.357960.com-彩票3d中奖技巧| www.b94.top-中国福彩3d金码| www.cp9363.com-中彩登录网址| www.1998.cx-网上彩票开奖查询| www.73814.com-彩票网拖-| www.23219.cc-河北快三走势图天的| www.a29.net-七七彩票怎么玩| www.320783.com-彩票开奖结果大乐透| www.107368.com-佛教与彩票-| www.502342.com-热拉好多人在推彩票| www.31758.com-手机唯彩看球| www.983285.com-体彩竞彩下载| www.wh.com-彩票技巧规律| www.817212.com-968彩票app-| www.881032.com-快三的走势怎么看| www.938285.com-福彩快三怎么赚钱| www.975842.com-河南彩礼标准限制| 500彩票网www.97655e.com| www.6033.site-澜沧福利彩票管理| www.11879.cc-超级彩票骗局|