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.l31.net-彩神2代理-| www.6886.me-杨震足彩博客| www.006134.com-福彩3d奖号-| www.628661.com-下载新2彩网| www.768808.com-粤淘彩票购票厅| www.619127.com-吉刮彩-| www.881693.com-辉煌团队彩票| www.03416.com-福彩开奖录像| 大赢家彩票平台www.376513.com| www.299735.com-内蒙古快三3| www.577866.com-网上彩票是骗人的吗| www.79az.com-福彩22选五开奖号| www.562225.com-什么叫彩票流水| www.33vy.com-有中七星彩的人吗| www.3487.cc-福彩还能买吗| www.15224.cc-浙江体彩怎么买| www.907707.com-吉林快三和值攻略| www.77197.cc-11145彩民-| www.292390.com-快三规律大小单双| www.770292.com-体彩排烈五开奖结果| www.885655.com-信彩彩票官网地址| www.970262.com-ag彩數據-| www.yh73.cc-手机福彩8-| www.767875.com-网络彩票游戏犯法吗| www.191143.com-体育彩票快三玩法| www.415858.com-竞彩外围反奖率| www.660143.com-五星体育竞彩推荐| www.602235.com-一千万中彩票| www.795478.com-河北竞彩快三| www.671397.com-88zzcc天下彩| www.539.hk-福运来彩票骗局| www.16431.com-奖金最高的彩票平台| www.91go.cc-辉煌彩票技巧| www.89196.com-网上彩票害死人| www.8367.net-算局七星彩旧版本| www.015091.com-彩民买彩票上瘾| www.26392.com-人人人人中彩票官网| www.057268.com-福彩3d预测总汇测| www.218.cm-英国赛车时时彩官网| www.861753.com-彩客彩票手机下载| www.952593.com-k彩手机安装| www.nw2.com-大发快三规律吃人| www.966136.com-福彩中奖信息| www.349649.com-彩票暴富-| www.54770.com-恒彩彩票怎么样| www.321128.com-彩票开奖七星彩开奖| www.186598.com-时时彩怎么改时间了| www.6078.cn-奇门测祘彩票| www.116588.com-网上彩票买是真假| www.104322.com-老彩民看凯利指数| www.205622.com-淘宝彩票一我的账户| www.k03.top-福彩三d字迷新彩吧| www.3267.com-凤凰彩票输了钱| www.959312.com-杏彩168-| www.ys2.com-赠送彩票-| www.tw68.com-竞彩真正的国内高手| www.06bf.com-彩票中奖技巧指南| www.64rr.com-微信足彩交流群| www.0280.top-时时彩有追杀模式吗| www.5235.net-香港赛排位及派彩| www.373144.com-中彩票概率计算公式| www.hc28.com-彩8彩票代理骗局| www.wb08.com-腾讯时时彩开奖号码| www.14cw.com-福彩3d路数遗漏| www.75ra.com-好彩店彩票软件下载| www.1408.vip-好运来高手彩坛| 博友彩www.326265.com| www.958802.com-今晚体彩的开奖号码| www.01988.com-至尊彩网站-| www.70xc.com-彩票刷单兼职| www.7138.com-彩票双色球拖胆计算| www.08jd.com-类似七星彩的小说| www.3364.cc-彩虹社交app| www.xe22.com-福彩和值跨度对照表| www.576047.com-福彩3d和值振幅走| www.859833.com-彩票封号是什么意思| www.oe8.com-体彩11选5走势图| www.768400.com-时时彩杂六半顺规律| www.896603.com-梦见买彩票中五千万| 购彩在线www.66332u.com| www.09ac.com-手机高频彩-| www.007251.com-辛运彩-| www.980472.com-广西体育彩票投注站| www.9253.wang-万达彩票是黑平台吗| www.856018.com-彩站宝网页版登录| www.72377.cc-福利彩票双色球复式| www.397637.com-我想开彩票店怎么开| www.710239.com-28送彩金微信| www.870277.com-河北快三是什么| www.hh3.com-快三单注中奖金额| www.pe32.com-吉林快三一把一结| www.z55.cc-宋代红绿彩瓷器鉴定| www.874513.com-大乐透彩票开奖号码| www.az79.com-内蒙古快三开奖直播| www.03ks.com-600彩票下载| www.455734.com-俄罗斯彩票有几种| www.23nb.com-亚洲杯足彩-| www.38118.com-大彩网是不是注销了| www.856938.com-如何开彩票站| www.122104.com-澳洲时时彩开奖平台| www.882573.com-重庆5分彩开奖号码| 大赢家彩票网www.178625.com| www.474.bid-13彩票软件app| www.9139.biz-七色彩虹-| www.579799.com-福利彩票最准确| www.004157.com-博彩团队真能赚钱吗| www.116909.com-福彩网是什么网站| www.71eh.com-信彩娱乐平台app| www.3833.pw-好彩分手歌词意思| www.gl10.com-快三投注技巧大全| www.816090.com-四川快乐i2爱彩乐| www.389765.com-彩8彩票安卓版官网| www.728061.com-奥客体彩-| www.996181.com-约彩彩票骗局揭秘| www.d24.bid-www.皇都彩票| www.747881.com-谁会做竞彩app| www.950005.com-禁止网络销售彩票| www.pn36.com-3d彩乐乐专家预测| www.1777.pw-外围彩票什么意思| www.293136.com-体彩481对子技巧| www.684087.com-吉林快三杀码| www.747574.com-爱上彩票-| www.801981.com-优彩网彩票可靠吗| www.871453.com-福彩藏机总汇| www.923099.com-709彩票旧版本| www.969024.com-众彩黑我钱-| www.cp017.com-三分快三彩票| www.he24.com-青岛有快三彩票吗| www.962064.com-360竞彩网-| www.cv88.com-江苏快三手机助手| www.423500.cc-天际彩票黑平台| www.555981.com-国乐彩怎么样| www.635108.com-七彩影城爱建店| www.946221.com-568彩票下载| www.cp025.com-江西快三官网| www.48yn.com-七彩杯成绩查询| www.983146.com-新盈彩官方网站| www.73zt.com-彩店宝怎么停运了| www.9522.loan-彩钢夹芯板岗亭| 云博彩票www.01883.cc| www.50204.com-竞彩足球比分500| www.003342.com-gc彩票是-| www.062523.com-彩神争霸有风险吗| www.5666.live-吉林市彩走势图| www.8503.top-中彩双色球预测专家| www.113403.com-各种釉彩大瓶也自| www.2016.tv-恒发彩票app| www.644937.com-九方图测彩票| www.299782.com-手机福彩门户| www.806708.com-网络上还能买彩票吗| www.904758.com-彩票揭秘技术书籍| 彩票8www.cp8002.cc| www.541635.com-竞彩足彩彩票| www.460.bid-用大数据分析彩票| www.kw45.com-七天彩是不是坑人的| www.q28.cc-世界杯彩票网上买| www.46le.com-云烟五彩缤纷的意思| www.156.bid-彩库宝典v1.0| www.192051.com-大发快三提前开奖器| www.268411.com-卓尚三彩-| www.350568.com-冠军彩票app下载| www.854321.cc-多彩网手机app| www.100520.cc-乐彩客手机-| www.838553.com-竞彩让平负-|