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天

知道了
1分快三 www.606212.com-彩界老翁独胆| www.233748.com-河北快三走势推荐| www.cai38.cc-双色球快三开奖号码| www.3976.cc-球赛竞彩app| www.33316.cc-全国农村彩礼| www.003133.com-今日福彩三地藏机图| www.713763.com-双色球彩票尺寸大小| www.880293.com-7乐彩开奖时间| www.450411.com-比较大的博彩公司| www.589070.com-彩客足球竞彩| www.779796.com-600万彩票网| www.948019.com-彩票到哪里兑奖| www.qp50.com-我查一下福彩三| www.38636.cc-彩运宝下载安装| www.000248.com-云南时时彩开奖码| www.152351.com-36码4s彩票-| www.303523.com-双彩论坛3d和值谜| www.850038.com-腾讯分分彩组六必中| www.152963.com-手机时时彩k线图| www.fh31.com-山鹰计划彩票| www.7888.vip-天天快三彩票| www.254065.com-22彩票-| www.81832.com-时时彩追热号与冷号| www.066864.com-最安全时时彩网站| www.36885.cc-28彩官方app| www.210028.com-幸运快三下载app| www.922011.com-玩高频彩的职业高手| www.fj20.com-十分快三计划软件| www.i80.top-福彩精英论坛| www.48dw.cc-彩票公式赚钱什么意| www.895.cm-下载福彩3d字谜| www.6149.vip-时时彩黑马全天计划| www.25326.cc-二四六报彩神童论坛| www.731982.com-足彩19030-| www.841873.com-足球彩票费用一年| www.677660.com-南京华彩国际学院| www.809052.com-上海快三和值怎么算| www.905385.com-开体彩店怎么赚钱| www.987813.com-时时中彩网-| www.ka02.com-下载2元彩票| www.14vc.com-彩票2019036| www.931026.com-体彩七星彩如何中奖| www.697.live-私彩代理要赔钱吗| www.013020.com-彩票高返点代理注册| www.188468.com-快三连号中多少钱啊| www.267252.com-足彩19040-| www.344244.com-78彩票经销商| www.47rt.com-投彩网址-| www.0205.cc-常州福彩发行中心| www.6006.net-明天3d彩票开结果| www.518910.com-q彩在哪下-| www.203030.com-山西福彩网-| 盛彩网www.41518r.com| www.019482.com-体彩跟福彩哪个更假| www.269039.com-彩票里面的砍龙| www.721136.com-重庆时彩数字规律| www.cp5992.com-丹麦快乐彩开奖结果| www.217055.com-哪些省份有快三彩票| www.355637.com-今天足彩比赛结果| www.22.gg-江苏快三有多少期| www.727.space-宝哥竞彩今晚推荐| www.957014.com-北京福彩3d开奖| 大赢家彩票平台www.351587.com| www.434227.com-甘肃彩票中奖| www.700210.com-玩彩高手3d预测| www.805859.com-福彩刮刮乐过期| www.20032.com-588vip彩票网| www.024592.com-是谁代理彩神通四码| www.443918.com-意彩app官方下载| www.021794.com-芬兰分分彩app| 彩票8www.cp8016.cc| www.629505.com-5分彩全天288期| www.713905.com-时时彩平台租赁| www.801994.com-云南福利彩票中心| www.886093.com-神州时时彩-| www.969406.com-福彩3d实用的书籍| www.qw90.com-香港时时彩走势图| www.9fo.com-体彩两位数算中奖吗| www.155519.com-买彩票技巧顺口溜| www.263908.com-7k官方网彩票| www.46674.com-时时彩胆码免费计划| www.984515.com-彩八彩票网址| www.bq62.com-彩71首页-| www.510.cc-时时彩听说停售是吗| www.47199.com-手机上买彩票那里买| www.215608.com-湖北快三好假| www.158757.com-czp彩票站下载| www.887361.com-买福利彩票算赌博吗| www.331777.com-广西快三今天一定牛| www.503330.com-空银行卡代刷彩票| www.616418.com-竞彩半全场全包盈利| www.731679.com-第一彩票网官网下载| www.870332.com-黑彩票平台都有哪些| www.987414.com-河北快三冀彩宝| www.qp34.com-快三跨3号码| www.413605.com-竞彩6串50计算器| www.zq55.cc-彩票怎么样算中奖| www.554485.com-七星彩复式组合工具| 500万彩票www.98528f.com| www.3go.com-雅彩盛-| www.2820.org-k彩游戏下载| www.130165.com-能否网上买福彩| www.589875.com-今日足彩推荐方案| www.770259.com-彩票足球竞彩网| www.275392.com-中国体彩网阳光开奖| www.95fk.com-投彩带赚是干什么的| www.9iz.com-七星彩解梦幸运选号| 中彩网www.71233k.com| www.sp15.com-时时彩数据遗漏| www.943933.com-百姓彩神app| www.779947.com-彩票六加一开奖结果| www.177669.com-分分快三计划网页| www.158094.com-佬牛足彩18085| www.052308.com-彩神v有风险吗| www.788832.com-足彩专家-| www.971602.com-手机卖彩票合法的吗| www.825938.com-教你七星彩的规律图| www.887889.cc-七星彩历史的今天| www.950197.com-博大彩票下载安装| 至尊彩www.c229.net| www.ny04.com-彩票选号神器平台| www.925017.com-福彩彩票开奖视频| www.7007.cn-体彩猜球规则| www.uh22.com-浙江彩票11选5| www.14dv.com-36体彩走势图| www.707.xyz-足彩总进球数结果| www.4131.org-彩虹的重力苏东霖| www.pz75.com-彩票77安卓-| www.996726.com-博友彩软件下载| www.619159.com-淄博市福彩中心地址| www.98920.com-时时彩选号教学视频| www.528064.com-彩票之家如何| www.814804.com-吉林快三大小微信群| www.972441.com-彩铅萌图-| www.30sl.com-周五有什么彩票开奖| www.406162.com-风雨彩虹-| www.520705.com-李彩琳坏丫头歌曲| www.019851.com-糖果彩是赌博吗| www.768168.com-淘彩app怎么下载| www.971259.com-彩迷玩法-| 幸运彩票www.731066.com| www.nk98.com-今日足彩推荐| www.1cg.com-彩票高手网齐中网| www.4416.me-山西省快三-| www.900081.cc-网络彩票8816| 68彩票www.68689k.com| www.388906.com-分分彩定位胆经验| www.570416.com-凤凰彩票安全可靠吗| www.355630.com-常州体彩店转让信息| www.466787.com-七乐彩4个号有奖吗| www.552197.com-火的体育彩票| www.668464.com-出国干彩票可信吗| www.794656.cc-福彩3d折线图谜| www.891257.com-博友彩邀请码怎么弄| www.109836.com-红牛彩票的苹果入口| www.813084.com-线上体彩合法吗| www.35688.com-08彩票下载-| www.826292.com-福彩3d布衣大全| www.941189.com-阿里彩票怎么回事| www.0pg.com-流文溢彩优美散文| www.974184.com-彩运来官网注册| www.30ib.com-体彩刮刮乐兑奖方法| www.295511.com-彩票中奖前的预感| www.2565.cn-常州彩票店转让信息|