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.675297.cc-百福利彩票开奖结果| www.856756.com-快三倍投10期计划| www.928332.com-网上福彩3d投注站| www.986546.com-资讯567彩票| www.dr5.com-今日快三走势图江苏| www.285217.com-大发快三预测团队| www.395603.com-彩票周六周日开什么| www.789338.com-竞彩足球外围怎么买| www.vq27.com-刚力彩芽-| www.8532.cn-彩奕颂有网店吗| www.657095.com-做梦梦见彩票号码| www.7484.com-彩票入驻便利店条件| www.cai3277.com玩快三年入十万技巧| www.067392.com-如何举报私彩| www.34397.com-上海足彩销售点| www.cai66.cc-快三开奖结果江苏| www.220715.com-台湾5分彩开奖| www.045847.com-福彩网点地址查询| www.313918.com-数字彩票开奖结果| www.369581.com-彩票封-| www.365103.cc-体育彩票看直播开奖| www.j51.club-贵州彩票中奖新闻| www.128149.com-福利彩票纸不能折| www.242241.com-168彩票正版| www.605191.com-多彩的近义词| www.745972.com-福彩无纸化投注| www.849996.com-腾讯分分彩天天计划| www.960840.com-2018吉林快三群| www.fr86.com-发彩网是干什么的| www.20hc.com-七星彩第19028| www.5994.cc-1919永久彩票| www.169109.com-江苏福彩-| www.561373.com-e彩票手机版下载| www.189809.com-网上彩票骗局大揭密| www.277151.com-彩民之星专家预测书| www.bw70.com-甘肃快三结果查询| www.zx10.com-彩虹4无人机| www.0289.cn-彩票店转让官司起诉| www.275913.com-有人叫我玩快三| www.511447.com-含彩虹取名-| www.657926.com-陕西百宝彩快乐十分| www.4274.top-彩票领奖时间| www.i12.net-彩票图3d-| www.505279.com-彩票怎么样不能兑奖| www.1439.com-7号彩票娱乐邀请码| www.637109.com-彩虹六号透视挂| www.765808.com-百盈快三在线计划| www.89753.cc-彩票主任事件| www.182667.com-玩彩票算是赌博吗| www.976142.com-信阳彩礼一般多少钱| www.8552.net-中国竞彩网冠亚军| www.535908.com-中彩票后很低调| www.693790.com-350彩票-| www.767275.com-彩票倍投计划表| www.963079.com-排列三下载彩票| www.yc63.com-派彩网采集器| www.632093.com-时彩后一规律| www.843639.com-福利彩票付主任获刑| www.931073.com-马来西亚南洋彩记录| www.985411.com-足彩反着买-| www.py9.com-百宝彩湖北快三| www.967174.com-7星彩多少天内兑奖| www.cp758.cc-一分快三平台下载| www.736034.com-优惠活动彩票送28| www.422.me-体彩19015期| www.322148.com-779彩票代理| www.450357.com-彩票数字统计学| www.557945.com-彩神vi代理邀请码| www.631563.com-下载竞彩官方网站| www.695957.com-足彩比分网-| www.765528.com-808海口彩票网| www.842221.com-福利彩票资金分配| www.910622.com-福彩时时彩多种玩法| www.969944.com-燕赵福彩网网页版| 网易彩票www.560692.com| www.ot71.com-2019年彩票新规| www.3820.com-竞彩足球赔率规律| www.9377.org-新快报金钱豹福彩| www.93337.com-海南七星彩中奖规则| www.110265.com-七星彩49组包码| www.213506.com-幸运5快三-| www.636915.com-emoji表情彩虹| www.cp6939.com-河南快三平台| www.lp77.com-网络彩票可信吗| www.664637.com-k彩票网-| www.632859.com-福彩2d地区-| www.178627.com-中国福利彩票软件| www.12535.cc-彩票买-| www.867153.com-福利彩票网购| www.948853.com-体育彩票有app吗| 凤凰彩票www.77802z.com| www.op37.com-体彩87期开奖号码| www.42dw.com-绍兴市体彩中心地址| www.0708.wang-万博彩票是黑网吗| www.399351.com-sk印象彩票下载| www.809676.com-网上怎么打彩票软件| www.981847.com-七星彩在线缩水工具| www.917107.com-彩铅画人物图片| 幸运彩票www.768399.com| www.tp85.com-现在买不了足球彩票| www.938106.com-易彩应用版-| www.rk10.com-福彩基诺玩法| www.151723.com-韩国彩票lotto| www.bj32.com-大发快三下载地址| 新盈彩www.xinyc2.com| www.557753.com-众彩网杀号定胆| www.111021.com-怎么找彩票微信群| www.585405.com-天天中彩票腾讯| www.88465.com-广西福利彩票自助| www.104311.com-体彩排三杀跨度公式| www.853817.com-浙江彩票开奖查询| www.613539.com-qq群彩票机器人| www.068210.com-必中彩票计划苹果版| www.7542.cc-江苏竞彩店申请| www.14nc.com-福彩三d谜语8期| www.387887.com-下彩彩票客户端| www.253035.com-时时彩走势图网易| www.fc2.com-2018彩票店前景| www.498.bid-北京快三过年停几天| www.25657.com-菜鸟彩票登录| www.523608.com-福彩七彩乐-| www.598597.com-七乐彩号码-| www.721005.com-彩票2元3d走势图| www.445399.com-福彩开奖下载| www.538430.com-官方时时彩有多少种| www.616180.com-体彩扑克牌玩法技巧| www.383129.com-天天赢彩票真假| www.273691.com-彩票pc是什么意思| www.55139.cc-彩金棋牌官网| www.774346.com-七星彩中奖列表| www.911090.com-k彩网上彩票靠谱吗| www.974972.com-彩票两元网走势图| 瑞彩网www.680358.com| www.30gw.com-广东竞彩网络实体店| www.770181.com-好彩彩票苹果| www.153709.com-8k彩票有多少人玩| www.14rt.com-七星彩图片中奖| www.568102.com-彩票当日开奖| www.654280.com-彗彩国际是传销吗| www.740073.com-澳门彩票公司注册| www.835499.com-中彩那天课件| www.912493.com-快三人人-| www.967234.com-时时彩购买网站| 福彩www.15355s.com| www.zk04.com-下载鑫彩网-| www.963256.com-彩钢瓦价格-| 中福彩票www.631259.com| www.460386.com-盛世彩票漏洞| www.367321.com-如何用彩铅画樱花树| www.704579.com-足彩胜负比分开奖| www.330873.com-河北福彩网官网| www.72gs.com-体彩容错表解释| www.721296.com-分分彩数字规律| www.800461.com-福利彩票怎样中奖| www.865857.com-艾彩论坛登录| www.920519.com-彩票摇号模拟器| www.969361.com-彩53软件-| www.050005.com-聚诚是黑彩吗| www.161723.com-体彩广场30万摸奖| www.15km.com-结婚前因为彩礼分手| www.763863.com-彩票老司机软件下载| www.857182.com-柬埔寨彩票推广| www.905762.com-网络黑彩处罚| www.980154.com-足彩胜平负计算器|