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.389380.com-彩票大奖得主的星盘| www.jm06.com-五亿彩合法吗| www.60fj.com-ag快彩是什么意思| www.3720.com-球彩sam-| www.33226.cc-福彩中4个号多少钱| www.013016.com-七星彩豹子号| www.111067.com-美国彩票强力球图| www.223954.com-大发uu直播快三| www.62712.cc-七星彩今晚开奖头尾| www.773611.com-时时彩必中后二| www.526958.com-宝哥竞彩今晚推荐| www.467688.com-今天3d彩票图| www.566013.com-智能彩票预测下载| www.648976.com-瓷器后加彩-| www.130464.com-彩票奖号-| www.381009.com-今天开奖彩票号码| www.609636.com-腾讯分分彩三星漏洞| www.678098.cc-易彩堂开挂软件下载| www.560613.com-彩票预测大师必中| www.278719.com-吉林快三计划独胆王| www.241808.com-下载新2彩票| www.230772.com-长城彩票-| www.cp9536.com-中彩网投注靠谱吗| www.303014.com-福彩三d走势图表图| www.540059.com-苹果彩票软件| www.379078.com-快三和值有哪些技巧| www.aa79.com-时时彩票下载安装| www.947430.com-99彩吧新彩吧| 十三国际www.578113.com| www.nl71.com-足彩胜负开奖| www.32066.com-手机怎样买足球竞彩| www.984757.com-好彩店彩票官网| www.rz70.com-彩票靠谱吗-| www.16za.com-欠债中彩票-| www.58lh.com-河内5分彩网址查询| www.6354.vip-摇发彩票-| www.il92.com-福彩快三单注奖金| www.31832.com-重庆福彩3d-| www.30nh.com-新浪彩网是骗人的吗| www.2107.vip-彩虹七号游戏图拉夫| www.12824.com-中体彩官网电脑版| www.425729.com-彩霸王正牌资料| www.990037.com-下载时时彩软件| www.qw46.com-分分彩提前知道开奖| www.623105.com-体彩排列三独胆王子| www.960855.com-快三全天一期计划| www.cp3918.com-湖北福彩快3| www.g02.in-彩票11选五玩法| www.22qe.com-159888彩票-| www.cp8318.com-福利彩票字谜汇总| www.536816.com-中国福利彩票验证| www.720850.com-新2亦彩票论坛| www.808327.com-海口彩票网手机版| www.887873.com-七星彩历史号码对比| www.965323.com-云购彩票是真的吗| www.cai6099.com青海快三电视走势图| www.mf67.com-爱乐彩票网站| www.zd69.com-彩03-| www.69qt.com-一等奖彩票站知道吗| www.178299.com-快乐彩开奖结果查询| www.059291.com-体彩五d走势图| www.64lp.com-彩票三地开奖号| www.1883.biz-多彩贵州航空官网| www.8496.shop-福彩3d彩吧首页| www.32718.com-体彩5开奖号码| www.594881.com-陕西三彩集团| www.zr3.com-浙江快乐彩胆拖| www.100520.com-正版百乐彩-| www.196482.com-中国体彩开奖查询| www.np13.com-时时彩做号工具手机| www.722255.com-绘画图片大全彩铅| www.827463.com-118彩票平台网址| www.947568.com-彩票诈骗案-| www.cp3285.com-河南彩色纸箱厂家| www.486644.com-足彩对冲是什么意思| www.216234.com-分分时时彩技巧实战| www.313186.com-分分彩定位两期必中| www.383630.com-实时彩平台出租| www.335551.com-彩票弃奖记录| www.19881.cc-河南幸运彩当天开奖| www.79609.com-福彩今日报纸内容| www.536739.com-中国福利彩票双色俅| www.065228.com-乐迎彩票网址| www.618667.com-快三和值玩法| www.78we.com-体彩篮球竞彩网| www.9669.pro-老版彩乐园-| www.872083.com-彩吧祝手-| www.930181.com-彩票高手吧-| www.979879.com-二分快三官网| www.fs2.cc-网警是怎么抓时时彩| www.ps63.com-广州鸣彩传媒| www.w33.tv-3d杀一码家彩论坛| www.44ss.com-a7娱彩登录注册| www.393981.com-彩厍宝典大全| www.52cg.com-50o竞彩网-| www.5794.cc-体彩扑克任选玩法| www.162280.com-大运彩票换网址了吗| www.274800.com-福彩任选三玩法| www.353178.com-一支彩染发剂怎么样| www.198229.com-福彩双色球走势| www.273321.com-千亿团队彩票| www.344238.com-乐彩app可靠吗| www.500989.com-福彩5分彩-| www.570371.com-恒大彩票网怎么样| www.639451.com-体育彩票门店| www.711089.com-彩伦纺织-| www.774042.com-香港博彩堂-| www.12302.cc-728彩票官方网站| www.867056.com-周五福彩开奖| www.356053.com-腾讯分分彩可靠平台| www.359375.com-彩票真假鉴别| www.496201.com-足球博彩资金| www.006570.com-5分⑥和彩计划| www.095100.com-外围足彩app排名| www.2441.shop-福利彩票直播| www.15368.cc-彩库宝典官方版下载| www.u42.me-爱乐透彩票专业分析| www.262759.com-福利彩票手机软件| www.182296.com-内蒙快三跨度| www.315714.com-北京彩虹冰淇淋机| www.399766.com-足彩兑奖时间截止| www.565690.com-3d牛彩涂谜九| www.655358.com-福彩小助手可靠吗| www.817622.com-快三挂机稳赚模式| www.899297.com-c81彩票app-| www.ul2.cc-体彩开奖结果今天| www.8383.me-体彩复试规则| www.83960.com-福彩福彩3d-| www.13738.cc-老重时时彩走势图片| www.57550.com-请问彩票中奖骗局| www.012532.com-摇摇彩票-| www.77kq.com-七星彩版区全版| www.5349.xyz-优选彩票app| www.54677.com-开户彩金优惠| www.352311.com-青蛙彩网下载| www.324360.com-体彩彩票app| www.419021.com-推店竞彩实体店| www.517261.com-七星彩现场开奖码| www.578566.com-体彩门店图片| www.639645.com-支付宝会员兑换彩票| www.zd78.com-彩票免费预测软件| www.868273.com-全民8彩票app| www.ls5.com-手机快三赌博| www.i50.cc-彩吧论坛首页页| www.60ay.com-竟彩足球比分直播| www.831505.com-年会彩票中奖| www.959590.com-vr彩票漏洞-| www.153963.com-彩95可信吗-| www.081013.com-天空彩与你同行| www.531570.com-彩票速赚攻-| www.717690.com-众彩网远程专家预测| www.839636.com-足彩最新欧赔| www.947702.com-多彩贵州贵阳频道| www.dx4.cc-3号彩票网站| www.yu85.com-久彩彩票app下载| www.72jk.com-彩票迷底-| www.3702.com-苹果系统彩票软件| www.18931.cc-3d福利彩票今天| www.001808.com-新彩吧网首页| www.097620.com-彩票中奖准备| www.186599.com-彩票改20分钟一期| www.282513.com-稳定的时时彩平台| www.898809.com-彩票预测没一个准的| www.424313.com-天天赢彩票平台|