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.06fp.com-3g彩票人工计划| www.058172.com-5分快三是什么彩票| www.162763.com-好彩自然来图片| www.666923.com-彩票规律的奥秘| www.907976.com-七星彩中中间五个号| www.tx32.com-万彩吧彩票开奖查询| www.656265.com-顶尖的彩票分析软件| www.870376.com-快三一共有多少注| www.983236.com-彩票38彩票领导者| www.vc9.com-乐彩骗我30万| www.849205.com-香港利民彩计划| www.970753.com-彩票历史开奖最多| www.016118.com-唯彩会app下载| www.559105.com-大彩网机器人预测| www.ml11.com-时时彩走势图app| www.04sx.com-幸运彩票6-| www.803948.com-中国体育彩票唯一| www.50602.com-七星彩互换区加急版| www.411183.com-唯彩会开奖结果| www.022813.com-时彩后三包胆怎么玩| www.124705.com-迷彩兔官方下载| www.236010.com-手机彩票网软件| www.338770.com-彩尊客户端-| www.460084.com-cf炫彩背包-| www.581286.com-体育彩票送jeep| www.249899.com-湖北福彩客户端| www.935205.com-彩之网3d相年富| www.99117.cc-腾讯博彩官网| www.528009.com-时时彩程序出售| www.786660.com-彩票中奖概率多大| www.945228.com-福建福彩投注站电话| www.mu07.com-彩票12下载-| www.88dq.com-网上售卖彩票犯法| www.0672.net-福利彩票去哪里申请| www.954678.cc-七彩票开奖结果今晚| www.vw23.com-九九彩票app下载| www.75dv.com-91竞彩之家关闭| www.01911.com-旺旺彩票腾讯| www.200953.com-七星彩今期-| www.841149.com-体彩的类别-| www.377894.com-彩票77网页-| www.700967.com-买天天中彩票犯法吗| www.5886.cc-晋中福彩中心在哪里| www.002410.com-彩翼贷-| www.308688.cc-松原快三开奖结果| www.937897.com-购买七星彩-| www.860011.com-一线彩票骗局| www.933533.com-中国中彩票最多的省| www.236911.com-广东福彩网-| www.6561.cn-19500彩票官网| www.069055.com-幸运5分彩可信吗| www.620229.com-如何分辨釉下彩| www.cp6229.com-足球彩票-| www.40755.com-中彩网高手三肖| www.9858.loan-台湾福星彩票开奖| www.055054.com-彩票三分快三| www.795787.com-廊坊鸿运彩票网| www.115797.com-农村结婚彩礼新规定| www.555457.com-快三历史数据| www.888317.com-55彩票骗局-| www.xq82.com-也买彩网站正规吗| www.866970.com-星期一什么彩票开奖| www.172262.com-周易算法算快三| www.795608.com-内蒙古快三豹子预测| www.2992.wang-3550幸运彩票| www.334323.com-彩票少了一个角| www.81801.cc-时时彩冷号遗漏| www.189579.com-上海快三是什么彩票| www.337319.com-湖北快三未开号码| www.507231.com-福彩三d图库三毛| www.728968.com-富彩彩票是骗人的吗| www.876755.com-福彩七乐彩几点封机| www.977612.com-腾讯彩票走势图| www.gx52.com-鸿彩app-| www.513144.com-万博彩票层级维护| www.743811.com-大发彩票幸运快三| www.873830.com-竞彩足球彩票玩法| www.954388.com-手机制作彩票走势| 博友彩www.447478.com| www.me73.com-彩票代理点如何加盟| www.39as.com-嘉兴福彩销售中心| www.96yv.com-辽宁快乐十二爰彩乐| www.4940.vip-无限彩票-| www.97318.cc-古建筑彩绘-| www.135007.cc-注册送彩金的网址| www.392796.com-明天彩票出什么号| www.122897.com-酷彩吧是正规公司吗| www.7213.biz-重庆时时彩登录链接| www.910018.com-彩虹六号太难了| www.998145.com-神州风采彩票app| www.o09.com-体彩三句话试机号| www.48xu.com-广西快三推荐| www.955409.com-彩22作弊器-| 网易彩票www.36788h.com| www.679567.com-搜狗彩票杀号| www.750930.com-类似彩店宝彩票软件| www.809734.com-体彩3b开将号| www.880415.com-喜乐彩票开张结果| www.949362.com-彩75下载-| www.990215.com-彩乐园彩票-| www.wy.com-快购彩票3-| www.ku11.cc-福彩3d丹东全图| www.04eg.com-竞彩容错中奖| www.703996.cc-竞彩序列号能兑奖| www.792591.com-广东福彩主任是谁| www.915158.com-如何在淘宝上买彩票| www.994077.com-康彩娱乐体彩乐吧| www.tc8.com-吉林福彩3d走势图| www.qz52.com-大发时时彩稳赚技巧| www.9916.top-网上彩票app靠谱| www.279321.com-新浪时时彩开奖号码| www.897888.cc-彩票店标语-| www.773226.com-买彩心得与投注技巧| www.088015.com-双赢彩票开奖| www.rl35.com-福彩20分钟一开| www.27386.cc-七星彩内部精准码| www.96mk.com-梦想彩票站计划网| www.55ql.com-福彩作假案-| www.826283.com-33彩票33cc彩| www.339466.com-11选5爱乐彩浙江| www.866263.com-湖北体彩短信投注| www.951140.com-最高反水彩票| 幸运彩票www.73166f.com| www.93863.cc-新浪爱彩网首页| www.089041.com-彩神2是否合法| www.949601.com-体彩360-| 皮皮彩www.153680.com| www.xf38.com-七彩网彩票官方网站| www.650610.com-爱彩乐版本下载| www.323415.com-彩票816网站| www.396655.com-彩票美国28-| www.557742.com-彩票一龙双凤图| www.622097.com-五福彩票咋样| www.687790.com-彩票代理日结反水| www.816273.com-今晚的彩票中奖号| www.892821.com-有那些彩票软件| www.966442.com-福彩投注站-| www.89474.com-义乌彩票店转让| www.325958.com-双色球杀号彩经网| www.zz05.com-上海竞彩店转让| www.813.red-附近哪有体育彩票站| www.493.com-今日三d彩报银海| www.27285.cc-彩票倍率-| www.67700.cc-沉迷买彩票-| www.974140.com-黑鸟每天快三秒| www.qn71.com-江苏快三走势图批| www.889.cm-玩时时彩犯法么| www.3641.cn-福利彩票开几号| www.682446.com-如何网上购足彩| www.761930.com-广东体彩票十一选五| www.836213.com-腾讯快开彩兼职| www.930822.com-赌博彩票机-| 九州彩票www.6769q.com| www.788725.com-nba竞彩篮球| www.847997.com-古建筑彩绘图案大门| www.900651.com-赢钱彩app苹果| www.962227.com-福彩3d跨度字谜| www.b34.net-快三开奖软件网站| www.qt93.com-彩票造假案-| www.449941.com-快三012路是什么| www.563747.com-万彩资料大全| www.650232.com-南京彩票兑奖地址| www.737785.com-网易彩票真的假的| www.828393.com-数字彩怎么玩|