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.am13.com-幸运彩票是黑平台吗| www.83zx.com-彩票双色球号码顺序| www.132937.com-世界杯足彩专家预测| www.351251.com-真有人买彩票中奖吗| www.555776.com-云南11选5爱乐彩| www.775769.com-彩票53网-| www.rn43.com-快三三不同全包| www.3456.tv-腾讯旗下天天中彩票| www.460076.com-玩彩票大平台苹果版| www.585168.com-彩金38免费送| www.323958.com-福彩快三怎样选号| www.508218.com-牛人找彩票漏洞| www.669830.com-福彩弓d试机号查询| www.811772.com-特彩吧49qcc| www.963408.com-乐彩网分分快三计划| www.385674.com-明天网上彩票停售| www.793620.com-彩9官网下载安装| www.cai9333.com彩票开奖q-| www.883737.com-博友彩票客服| www.fv03.com-发彩网是正规网站吗| www.372973.com-何明七乐彩推荐| www.581015.com-大通彩票登陆| www.7nn.com-离婚后中的彩票| www.8809.loan-福建体彩报码聊天| www.5823.com-竞彩负其他-| www.1320.vip-七星彩开奖新浪表| www.7771.pw-关于彩票感想| www.584062.com-足彩看盘杀招技巧| www.771876.com-时时彩个人经验| www.993526.com-足彩有哪几种玩法| www.00ek.com-新加坡十分彩是什么| www.513747.com-国际彩票娱乐| www.811069.cc-彩票有走势规律| www.654249.com-彩票小助手网页版| www.428878.com-苏州中彩票去哪领奖| www.695013.com-竞彩篮球360混合| www.995983.com-利用竞彩套利| www.372011.com-搜索彩票网址大全| www.854671.com-下载彩视做视频相册| www.959064.com-江苏e球彩下载| www.kf70.com-达人彩票app下载| www.856422.com-无锡福利彩票店转让| www.954081.com-竞彩足球即时比分| www.1909.vip-南粤福彩34期结果| www.ym.com-宁夏福彩快3| www.37561.cc-中彩网擂台赛丶| www.974731.com-七星南国彩票论坛| www.kn30.com-中国足彩网彩票资讯| www.37ku.com-彩票平台招租| www.4612.cm-现在去哪里买彩票| www.015683.com-七星彩是不是假的| www.139260.com-上海福彩网下载软件| www.228326.com-河南都有什么彩票| www.m37.club-快三哪个平台正规呀| www.971741.com-9万彩票安卓| www.yp9.cc-福利彩票怎么算中奖| www.664.net-网易彩票预测推存| www.603701.com-梦见自己找彩票店| www.709563.com-网络体彩诈骗| www.797950.com-海南特区彩票| www.869119.com-快三平台时间差| www.8664.cc-七星彩史上巨奖| www.499037.com-刷彩金的平台| www.568419.com-三地福彩短租| www.730283.com-呼和浩特福利彩票网| www.351982.com-体彩竞彩生意| www.465355.com-体育彩票的投注方法| www.547988.com-时时彩开奖源api| www.610595.com-用彩铅画星空图片| www.123808.com-用彩票赚百万| www.617572.com-延边中福彩票中心| www.753659.com-福彩三地图谜| www.28475.com-盐城开发区彩票中奖| www.yy9.cc-快三助手软件下载| www.51qb.com-福彩刮刮乐富贵满堂| www.149949.com-掌中彩正规吗| www.747444.com-雅彩app官方下载| www.354511.com-福彩新彩网字谜| www.465956.com-什么是彩票漏洞| www.547669.com-彩票马甲包怎么回事| www.611972.com-河北省体彩中心主任| www.682596.com-手机还可以买足彩吗| www.771232.com-天天中彩票安全吗| www.839067.com-彩娱乐手机版下载| www.908917.com-今天开啥彩票双色球| www.975674.com-河南人上蔡县彩礼| www.gw32.com-体彩6+1-| www.507598.com-彩授三天计划| www.585721.com-哪个彩票注册送钱| www.661725.com-竞彩买比分的绝招| www.733182.com-江苏省体彩中心在哪| www.805295.com-七乐彩奖金多少钱啊| www.877958.com-彩票2003-| www.948467.com-天天彩票公益资料| 福彩www.26878z.com| www.cp3372.com-江苏快三三-| www.486820.com-足彩几点开奖时间| www.566754.com-青岛市体彩彩票中心| www.640133.com-开奖信息一福彩| www.789361.com-彩妆加盟店-| www.881079.com-彩票出黑-| www.971754.com-创彩网首页-| 大奖彩票www.11djcp.com| www.430786.com-江苏丰彩新型| www.533332.com-彩票分布-| www.602103.com-手机购彩中奖不给钱| www.697888.cc-彩报图库二-| www.772229.cc-中博在线买彩票| www.849222.com-篮球体育彩票软件| www.915836.com-全国彩票店-| www.977379.com-彩妆店是干嘛的| www.qf6.cc-乐和彩开奖公告| www.588007.com-乐游彩票-| www.654977.com-福彩晚秋和值谜| www.968684.com-重庆时时彩的qq群| 188彩票www.188975.com| www.366625.com-彩铅色彩搭配口诀表| www.wz2.cc-长春快三群-| www.wg59.com-体彩排列3杀号定胆| www.36fj.com-七星彩18139| www.12079.com-口袋彩票安卓| www.6qi.com-智慧彩软件挂机| www.779438.com-体彩七星开奖号| www.9329.online大马彩彩票马来西亚| www.633017.com-彩609是不是骗局| www.41cj.com-体彩休市公告| www.69416.com-518彩网登录| www.357399.com-婚后彩票中奖| www.qy67.com-时时彩号码计算分析| www.48087.com-彩票牛牛玩法| www.031238.com-彩票真的能中奖吗| www.268060.com-看彩-| www.346399.com-彩铅画获奖作品| www.458416.com-足彩网足球论坛| www.887468.com-釉下彩餐具安全吗| www.3272.xyz-万达彩-| www.09vk.com-冠彩网是啥-| www.053460.com-收费足彩推荐违法吗| www.7tm.cc-拼搏在线彩票官网| www.443.website快三秒奶茶怎么样| www.996523.com-亚博彩票论坛| www.801045.com-彩票天天彩选四开奖| www.902342.com-网络黑彩案例| 全民汇彩票www.52303b.com| www.xp1.com-彩票输钱经历| www.389528.com-今日3d彩图报纸| www.043550.com-梦怀孕是什么七星彩| www.545238.com-时时彩杀号器app| www.653059.com-500万彩票网赛程| www.703700.cc-998彩票软件| www.883212.com-鸿彩快三不能提现| www.940019.com-爱乐彩河北11选五| www.978950.com-360彩票苹果版| 博乐彩票www.622209.com| www.fw21.com-5亿彩是干什么的| www.to43.com-七星彩彩票开奖查询| www.818046.com-九万彩票骗局| www.17767.com-体育彩票招聘| www.144058.com-双色球彩票兑换期限| www.7713.cn-快三和值11可能| www.093911.com-白岩松回应彩票审计| www.214029.com-彩神争8下载最新版| www.52092.com-吉林麒麟快三数据| www.88593.cc-福彩3d走势彩宝贝|