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天

知道了
彩票123现在叫什么名字 www.41kn.com-收到体育彩票扑克| www.3394.biz-hcp好彩票网址| www.9849.cc-古建彩绘颜料| www.51640.com-甘肃酒泉福彩快三| www.701711.com-老郑足彩个人展示| www.819624.com-腾讯分分彩怎么平刷| www.900992.com-福彩3d东北王图迷| www.980599.cc-百盈彩票是真的吗| www.ft8.cc-快三官方开奖网| www.964962.com-体彩今天开奖视频| www.cp5779.com-彩票比赌博更危害| www.88271.cc-哪里下载吉彩宝| www.655531.com-乐福彩票下载安装| www.926337.com-吉祥彩最新登录地址| www.cai6933.com甘肃快三带线走势图| www.008027.com-竞猜足球购彩大厅| www.085318.com-正规彩票网址| www.135787.com-足彩胜平负赔率技巧| www.219273.com-福建福利彩票双色球| www.306342.com-818彩票app-| www.382227.com-彩5下载注册| www.546944.com-派彩走势图下载安装| www.098.live-顶级彩票登录| www.345418.com-vr彩票老是输| www.447684.com-澳洲三分彩开奖软件| www.330023.com-彩宝贝蓝球杀号定胆| www.505576.com-炫彩跑马灯壁纸| www.105921.com-全民足彩彩票app| www.3408.vip-可以追号的彩票软件| www.239369.com-五分快三是骗局吗| www.209812.com-百姓彩票下载安装| www.ll70.com-江苏快三能玩吗| www.049292.com-3d天天彩图报纸| www.6889.biz-大丰彩票网址| www.288267.cc-七星彩开奖直播观看| www.456592.com-华彩网-用户登录| www.49251.com-傲赢彩票百度百科| www.019589.com-贵阳申请福利彩票点| www.97468.com-砀山天价彩礼| www.076165.com-256彩票下载| www.732629.com-许昌结婚彩礼风俗| www.194969.com-上海体育彩票竞彩店| www.61gr.com-体彩6+1开奖| www.75066.com-福彩刮刮卡厂家| www.933382.com-65707彩票-| 财神网www.29277j.com| www.jh01.com-快三中奖技巧| www.689988.com-5o5oo万彩票网| www.86707.com-台湾快三是官方| www.105592.com-江苏体彩e球| www.329176.com-青海福利彩票下载| www.fg47.com-彩票平台赚返点| www.466826.com-彩票宝官网彩票合买| www.592326.com-梦图解码七星彩查询| www.705249.com-体彩竞彩怎么兑奖| www.838161.com-贵阳彩票店转让| www.954831.com-中国体育足球竞彩网| www.lp2.cc-内蒙快三新规则| www.p39.org-大发快三大小| www.93733.cc-彩70娱乐-| 亿彩www.6832o.com| www.731190.com-彩16彩票电脑版| www.811233.com-新浪胜负彩比分| www.887163.com-彩票代玩是真的假的| www.964249.com-310足球竞彩合买| www.ns8.com-体彩第19035期| www.04nu.com-儿童彩铅主题画| www.82xv.com-七星彩4倍中奖故事| www.587675.com-合肥彩票店铺转让网| www.60xw.com-澳门赌彩诚信网站| www.017289.com-香港王牌彩票网| www.130709.com-福利彩票摇一摇机选| www.409550.com-491彩票论坛| www.539073.com-安彩大酒店-| www.6220.top-彩皇网址-| www.28051.com-彩票指南电孑16版| www.262308.com-打出彩票可以作废吗| www.442862.com-福利彩票复式怎么算| www.576341.com-一分彩怎么看号码| www.54oy.com-南昌福利彩票兑奖| www.751462.com-湖北省福利彩票查询| www.lr83.com-怎么看中彩网正规吗| www.556612.com-七乐彩复式投注缩水| www.879795.com-网络快三正规吗| www.yg96.com-腾讯分分彩胆码技巧| www.788.vip-画彩虹背影图片大全| www.01188.com-相富年图彩之网| www.89548.com-手机彩票口碑最好| www.135569.com-彩票cp12专业版| www.35lq.com-辽宁福彩奖不停下载| www.136306.com-广西体育彩票杯| www.574919.com-大发快三回血贴吧| www.739416.com-体彩站点-| www.827689.com-世纪佳缘彩票托| www.905603.com-竞彩混合过关计算器| www.981284.com-六开彩app下载| www.481668.com-竞彩足球网澳客网| www.655854.com-中国彩客网首页官方| www.454944.com-全球博彩公司网站| www.520626.com-o38彩票软件下载| www.620038.com-香港中彩-| www.700318.com-优信彩票在线登陆| www.784207.com-乐彩网是正规的吗| www.855168.com-体彩有什么彩种| www.927511.com-彩票一共几个数字| www.365743.cc-看福利彩票开奖| www.501266.com-中国彩吧论坛中| www.586903.com-足球彩票价钱多少钱| www.660987.com-95快乐彩票-| www.733807.com-彩票改规则2月11| www.6928.in-七彩云南门票多少钱| www.4645.org-彩票导航360| www.005565.com-七乐彩单式开奖规则| www.107358.com-80彩票app下载| www.762214.com-奇门遁甲测彩票实例| www.kk16.cc-11选5彩票软件| 网易彩票www.9356h.com| www.929323.com-安徽秦栏体育彩票| 大赢家彩票平台www.978261.com| www.143883.com-彩神大发云-| www.82203.com-幸运快三怎么看豹子| www.73237.com-捷豹彩票登录平台| www.8500.cm-k彩线路测试| www.99433.cc-足彩开奖奖金预测| www.540024.com-七星彩几点不能买了| www.364547.com-刚力彩芽和上户彩| 188彩票www.188937.com| www.js30.cc-王者彩票有漏洞没| www.758873.com-彩票中奖者是真的吗| www.335223.com-快乐双彩开奖| www.52732.cc-55彩票网页版本| www.77332.cc-福利彩票30期| www.001111.cc-大众六台彩开奘结果| www.938184.com-双赢彩票可靠吗| www.979290.com-五彩缤纷香烟多少钱| www.cai328.com-信誉好的私彩平台| www.rj75.com-彩种齐全-| www.t82.club-福彩3d字藏机图| www.35jh.com-最新局王七星彩奖图| www.037.bid-体彩6十丨开奖号| www.2430.vip-陌陌好彩头直播| www.7016.me-彩609是不是骗局| www.68125.cc-福彩订单助手| www.010091.com-青海快三合值走势| www.072987.com-好彩爆珠多少钱一包| www.27817.com-国内彩票平台注册| www.381829.com-世彩堂靠谱吗| www.506890.com-体彩玩法大全| www.299816.com-贷款买彩票-| www.613588.com-qq群购彩-| www.141605.com-排列三彩吧助手| www.205988.com-头头博彩app| www.256087.com-旺彩3d下载-| www.320254.com-电视快彩-| www.500099.com-078彩票可靠吗| www.937966.cc-17彩票app-| www.7007.org-福彩2d山东地区| www.301058.com-6合万彩个-| www.382966.cc-香港报彩神童| www.492307.com-甘肃快三彩票走势图| www.416114.com-a彩娱-| www.535209.com-彩票都几位数| www.235724.com-特彩吧免费报码| www.304322.com-澳门快三-|