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.230333.com-彩票99骗局-| www.95wf.com-中学生玩彩票| www.72pn.com-365约彩官方网站| www.4341.top-湖南福彩报最新版| www.206361.com-福彩三d字迷| www.994432.com-朋友教我做微彩| www.gt60.com-体彩店内布置图| www.087179.com-购买七星彩-| www.58548.com-天天中彩票多乐快3| www.92861.cc-彩票之家开奖结果| www.3507.win-七乐彩杀号定胆澳客| www.9693.biz-国内彩宝品牌| www.056933.com-七乐彩开奖结怎么玩| www.497406.com-万福彩票网址| www.717853.com-北京快三出奖号码| www.06dq.com-彩铅手绘写实狗| www.665989.com-手机体育彩票网站| www.768956.com-买买彩票app| www.864599.com-手机中彩靠谱不| www.953776.com-牛牛彩票官网| 大赢家彩票平台www.009321.com| www.t68.top-福彩藏机图今天图| www.235381.com-广东省体彩中心| www.j95.cn-彩票支票-| www.348811.com-彩票网址app| www.932174.com-728彩票下载苹果| www.bg34.com-5分彩-| www.47wu.com-新浪爱彩是骗人的吗| www.5553.pw-uc彩票网可靠吗| www.185322.com-广东好彩1-| www.277283.com-彩票到底是真还是假| www.480114.com-澳洲快三开奖网站| www.964155.com-新彩吧首页-| www.h67.club-汇丰彩票平台app| www.94vh.com-093彩票客服| www.773784.com-中国福到彩票| www.888561.com-凤凰彩票客户端下载| www.965080.com-彩神uu快3-| www.cp098.com-彩票高賠率好平台| www.048699.com-彩覇王-| www.700485.com-足彩兑奖-| www.15645.com-彩铅颜色调色表图| www.83362.com-彩票业主-| www.23654.com-北京时时彩结果查询| www.54788.cc-福彩快3中奖号码| www.028055.com-广东福彩任三遗漏| www.292070.com-八八彩票官方网站| www.898308.com-什么是七星彩票| www.sn09.com-下载时时彩开奖| www.13872.com-鸿运彩票跟投怎么样| www.055157.com-黑彩案例判刑| www.341163.com-拉萨市福利彩票中心| www.550571.com-华夏彩票hxcp| www.791225.com-时时彩好的平台| www.882403.com-易彩堂彩票是真的吗| www.970456.com-全球彩可以玩吗| www.cm21.com-大发快三能赢回来吗| www.19oe.com-有人带我一起买彩票| www.1956.club-中国彩吧彩民图| www.b67.cc-幸运28玩时时彩| www.78wg.com-台湾5分彩投注平台| www.2999.date-牛彩网开奖结果| www.535770.com-彩票有几个号码组成| www.662809.com-竞彩投资最佳方案| www.799875.com-福彩开奖结果是什么| www.953416.com-彩票2元网开奖公告| www.7xx.com-员工领奖中彩票中奖| www.9564.org-福彩3d冷号-| www.803976.com-微信好友拉着买彩票| www.06568.com-福彩3d万能4码| www.336176.com-中福快三一分钟一期| www.86575.cc-彩吧论坛迷语图库| www.072213.com-秒速时时彩财神| www.016358.com-安薇快三开奖| www.197760.com-福彩3d交流讨论区| www.032896.com-福彩网邀请码怎么弄| www.300875.com-七乐彩预测推荐号码| www.534224.com-买彩票不中表情图片| www.526085.com-王者彩票网是真是假| www.019557.com-腾讯彩票幸运28| www.lo01.com-红彩app-| www.874830.com-7k彩票网app| 瑞彩网www.809215.com| www.023485.com-腾讯分分彩漏洞| www.200122.com-搜狐体彩福彩网| www.913272.com-彩珉之家-| www.yh64.cc-微信买彩票怎么兑奖| www.28dd.com-福利彩票怎么登录| www.678704.com-七星彩今日开奖视频| www.257182.com-北京快三在线计划| www.346888.cc-彩吧app手机版| 众乐彩票www.237944.com| www.71992.cc-世界杯足球竞猜彩票| www.131340.com-福彩双色球彩票| www.687100.com-重庆快彩快三| www.078063.com-中国彩票骗局揭秘| www.399767.com-海南有几种彩票| www.pk13.com-职业彩票高手经验| www.06ik.com-兰州市福彩-| www.75zd.com-汇彩彩票网站| www.54pw.com-幸运彩28-| www.1046.vip-《亿万彩票》| www.5671.top-日本彩票兑奖| www.535908.com-中彩票后很低调| www.676664.com-下载彩吧图库第一版| www.ml30.com-好彩堂幺机王| www.180849.com-彩29app下载| www.1994.love-幸运彩ˉ幸运二任选| www.567963.com-七彩山鸡养殖场地| www.703565.com-福利彩票选号器软件| www.984282.com-泰国博彩不要去做| www.2gq.cc-买彩票最多中了多少| www.xg18.com-永利彩票app| www.249658.com-天天中彩下载安装| www.95373.cc-彩票店五行属什么| www.092665.com-送彩金彩票软件下载| www.749722.com-金牛彩票登录| www.952674.com-乐和彩走势图表| www.998421.com-怎么在北京开彩票站| www.cv23.com-网上凤凰私彩平台| www.808373.com-柬埔寨五分彩下载| www.987803.com-体彩29选7走势图| www.cp1618.com-快三投注门户平台| www.149955.com-东彩娱乐注册| www.52713.cc-好彩软件是正规的吗| www.204048.com-5d彩化-| www.9573.com-福彩东方6加1| www.26643.com-七星彩大复式| www.cp9022.com-中福彩票app| www.315331.com-彩98app-| www.519088.com-投彩网是什么| www.084554.com-体彩机连接电视方法| www.509512.com-鑫鑫彩票合买| www.81cm.com-蚂蚁彩票网-| www.206980.com-全民彩票app| www.639409.com-彩票柜台-| www.746902.com-600网投彩票| www.826297.com-福彩3d大神-| www.879288.com-智慧彩票预测准不准| www.932891.com-118彩票软件平台| www.974493.com-上期体彩中奖号码| 天天彩票www.160882.com| www.86ur.com-彩票宗师-| www.222290.com-体育彩票十分钟开奖| www.91173.cc-日免软红好彩价格| www.8bc.com-a爱彩票-| www.230912.com-彩票933最新版本| www.023299.com-六给彩玩法规则| www.923458.com-包头彩票店生意转让| www.599.com-网网易彩票网| www.6604.cm-算命买彩票-| www.3975.com-体彩排列期开奖时间| www.63353.cc-彩礼不能超过两万元| www.003455.com-网络彩票菲律宾客服| www.027821.com-投彩带赚骗局| www.7ti.com-福利彩票李沧负责人| www.048658.com-辽宁3d水果图彩吧| www.466939.com-每天都可以买彩票吗| www.89247.com-白菜赌博论坛送彩金| www.089031.com-呱呱彩-| www.071609.com-11选5彩票微信群| www.024413.com-凤凰彩票平台被骗| www.089563.com-彩票对冲套利方法| www.137406.com-中国竞彩官方网站|