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.751054.com-彩票彩8-| www.699060.com-山东彩票十一选五走| www.498119.com-0818彩票是什么| www.416155.com-网络彩票骗局处理| www.610943.com-足彩竞彩赛果查询| www.36545.com-澳门彩票网站大全| www.8255.top-中国福利彩票第一位| www.600540.com-一元彩票网站有哪些| www.833535.com-福彩平台算违法么| www.8927.com-七星彩在哪里看直播| www.970054.com-体彩排列三终极杀一| www.ix31.com-江苏e球彩官网| www.7724.cn-玩黑彩-| www.186334.com-北京快三玩法技巧| www.147123.com-彩票投注网址app| www.487198.com-利用彩票平台赚钱吗| www.6175.cm-现在开彩票店赚钱吗| www.26772.com-七星彩是多少钱| www.366012.com-浩彩怎么组词| www.586804.com-彩世界官网下载| www.696877.com-新浪彩比分直播一| www.rj48.com-爱彩买彩-| www.1207.vip-买彩票挣5个亿| www.cp9733.com-好彩堂-| www.91zw.com-汇佰彩票是骗局揭秘| www.43896.com-彩票快三有几种| www.094446.com-快三多久开一次新区| www.34uq.com-中国七星彩内部号| www.3335.me-收缩中彩网-| www.773591.com-彩票秘籍中奖宝典| www.887512.com-古彩-| www.982401.com-云南体彩网首页| www.049163.com-少爷贝岛全彩| www.126824.com-快三在线计划网| www.zi56.com-湖南良新快三真假| www.9092.loan-人物彩铅画教程| www.942513.com-彩票中奖交税| www.hg2.com-甘肃快三助手免费| www.77233.com-彩票中奖率多少| www.33011.com-福彩投诉电话| www.410060.com-e球彩开奖号码| www.057207.com-中国体彩排列五结果| www.383212.com-彩票从哪里买正规| www.266015.com-娱乐快三是什么| www.397960.com-七星彩大奖合0的码| www.678978.com-彩票101-| www.852147.com-唯彩看球官网网页| www.v71.com-体彩牛材网采摘网| www.371408.com-万福彩票网站| www.99ph.com-江西福彩哪个台直播| www.00573.com-买体彩世界杯| www.122384.com-重视时时彩微信群| www.e13.net-精准彩票全天计划| www.82345.com-新彩票走势下载| www.41246.com-彩宝彩票电脑版| www.031746.com-信彩的骗局-| www.182464.com-吉林快三最大遗漏| www.020641.com-贵阳福彩官网下载| www.692891.com-十七彩票下载| www.805965.com-凤彩双色球-| www.884038.com-黑彩怎么赚钱| www.982110.com-重重时时彩开奖号码| www.bv0.com-518彩票网-| www.rq56.com-重庆时时彩载止了吗| www.778302.com-官方彩gz-| www.c03.cn-北京5分彩官网| www.47kv.com-东方彩虹-| www.cp5331.com-快三中奖宝典| www.022906.com-体育彩票开奖排列五| www.272932.com-双彩论坛网-| www.399789.cc-腾讯分分彩规律大全| www.954662.com-福彩3d规则说明| www.xh71.cc-彩虹六号手机版| www.74ts.com-彩票资料费大全| www.5315.com-1号站彩票平台注册| www.0288.site-彩票坚持能成功吗| www.6tb.com-彩票中奖公司平分| www.4771.vip-龙赢彩票-| www.369902.com-彩票机造假视频| www.387955.cc-快三和值13的号码| www.6276.cn-五福彩票赢了三万| www.538368.com-飞彩网能玩吗| www.978140.com-四川彩钢围挡| www.hf31.cc-正规彩票投注app| www.17ip.com-体彩星期试-| www.05634.com-彩票过滤设置| www.7040.xyz-彩票最热门的软件| www.555552.com-希咲彩-| www.93776.cc-腾讯五分彩最稳计划| www.h29.club-彩票的中奖号码| www.697002.com-浙江体彩大乐透预测| www.369709.com-双色球众彩网| www.450475.com-福彩开机号列表| www.86978.cc-什么是江苏快三三军| www.032289.com-好彩控制卡软件下载| www.520464.com-2元彩票开奖结果| www.8955.com-旺彩双色球第| www.67384.com-福利彩票一共几个奖| www.297236.com-网上彩票都停售了吗| www.722872.com-好彩票7168-| www.999961.com-10分彩是真的假的| www.16875.cc-体彩如何网上购买| www.36226.cc-体彩开机10期| www.360260.com-苹果原彩显示费电吗| www.504784.com-彩排现场描写| www.599544.com-体彩精彩足球| www.699320.com-网上购彩合法吗| www.991318.com-彩票126期-| www.hr7.com-快三屠龙最多多少期| www.654920.com-最容易中奖彩票平台| www.663869.com-7星彩历史开奖号码| www.790109.com-虚拟彩票摇奖机| www.918990.com-外围彩票哪里买| www.996826.com-云南快乐十分爱乐彩| www.hv88.com-北京体彩官网首页| www.q01.site-湖南省福彩中心地图| www.56nq.com-天天彩票是否正规| www.597911.com-体彩十一选五技术| www.708188.com-彩神ix下载平台| www.820206.com-山东彩板今日价格| www.943939.com-春秋彩票0120| www.cp317.com-福建快三中奖号码表| www.930135.com-福彩3d天吉网预测| www.fp8.com-7星彩中几个号有奖| www.553333.com-为什么足彩老是输钱| www.714432.com-福彩山地字谜| www.800.name-小六壬测彩票3d| www.369306.com-彩票306官方网站| www.724479.com-男主买彩票中奖后将| www.3993.bid-西甲看什么博彩公司| www.505599.com-彩票娱乐登录| www.807752.com-陈赫彩票-| www.130064.com-福彩网055ecc| www.190140.com-快乐彩查询-| www.74973.com-分分彩后二稳赚技巧| www.4451.net-玄学代码破解彩票| www.22728.cc-秒速时彩开奖官网| www.002886.com-天下彩票广西快3| www.216.website彩票直通车靠谱吗| www.7759.com-彩票中奖者死亡| www.59878.com-江西福彩快三规则| www.054700.com-体彩出租或转让| www.158127.com-足彩18098任九| www.1800.tv-网上高频彩-| www.034555.com-网上彩票平台合法吗| www.800894.com-利盈彩票下载| www.195.hk-素描彩铅画花朵图片| www.612417.com-竞彩捷报推荐| www.506519.com-彩天地app下载| www.565358.com-福州仓山体彩店转让| www.618845.com-下载小炮彩票| www.671118.com-福彩3d初几开| www.723691.com-蕲春彩票-| www.586072.com-下载i8彩票-| www.618286.com-省体彩主任-| www.671926.com-体育彩票几点出| www.723605.com-彩票哪买的多| www.776669.cc-福利彩票有什么技巧| www.827977.com-彩票app怎么举报| www.905268.com-伯爵彩票平台| www.954570.com-61彩票开奖结果| 星际www.930xj.com| www.972302.com-天玺彩票注册| www.951880.com-彩天下彩票正规吗|