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.697765.com-怎么打开彩票大赢家| www.871738.com-青蛙过河游戏彩票| www.957418.com-足彩任九开奖| www.cd.com-搜索河北快三| www.359995.com-福彩快3压大小| www.513575.com-幸运五星彩那里开奖| www.399.net-中国彩票巨奖排行榜| www.386803.com-凤彩网页版登录| www.341163.com-拉萨市福利彩票中心| www.520936.com-体彩票投注站利润| www.668225.com-tt彩票下载安装| www.ii99.cc-福彩3d彩票下载| www.8vy.com-体彩跟单能赚钱吗| www.721444.com-青海快三走势今天| www.827359.com-彩票中怎么顺龙| www.906962.com-8位数彩票开奖查询| www.974914.com-查福彩3d开奖号码| www.cp8328.com-福彩图谜-| www.nu71.com-快三和值9赔多少| www.t05.net-可以跟单的彩票软件| www.67ri.com-网易彩票电脑版官网| www.0981.xyz-安全的彩票台子| www.146637.com-即时竞彩篮球比分| www.881553.com-海南南国彩票论坛| www.978439.com-河南天成彩铝| www.c12.top-易彩彩民注册| www.370456.com-时时彩开源系统| www.082015.com-中彩网彩民论坛| www.e85.net-体彩七星彩开奖| www.415315.com-足彩竞猜串关规则| www.98575.cc-腾讯分分彩怎么看中| www.130946.com-江西彩礼一般给多少| www.272561.com-江苏快三官方彩| www.265403.com-双彩论坛3d字谜解| www.860728.com-幸运快三第一户| www.4252.biz-诚信的彩票预测软件| www.7279.pw-画彩虹又简单又漂亮| www.088216.com-彩票压大小-| 彩82www.c2808.com| www.91153.cc-好彩绿色宝珠| www.39572.cc-好彩vip下载| www.398877.com-彩神通3d推荐号| www.533779.com-3d彩票怎么推算| www.633078.com-中国篮球彩票怎么买| www.823662.com-福彩3d双彩图谜| www.694132.com-竞彩足球预测推存| www.8153.loan-竞彩彩票怎么看| www.002219.com-玩竞彩吧挣钱吗| 好运彩吧www.099386.com| www.bs08.com-中彩网综合-| www.334360.com-万达彩票平台可信吗| www.194101.com-福彩10分钟开奖| www.22830.com-王者彩票会赢吗| www.8218.biz-ll彩票怎么玩| www.396783.com-58彩丨58彩开奖| www.535865.com-北京快乐8开奖彩票| www.899254.com-一分钟一期的彩票| 博乐彩票www.35918e.com| www.rs50.com-559彩票公司| www.424288.com-3d和值遗漏乐彩网| www.53ir.com-福彩多少钱一张| www.010838.com-手机怎么买足球彩票| www.596132.com-福彩报纸的首页| www.661559.com-竞彩半全场中奖图片| www.739241.com-凤彩网彩票杀号| www.810869.com-中国福利彩票的书| www.881677.cc-辉煌彩票是真的吗| www.062948.com-彩票挂机赚钱| www.239659.com-网易彩票预测| www.906971.com-快三有哪几种| www.995384.com-传统五分彩-| www.03337.com-搞彩票输的倾家荡产| www.qs2.com-湖北快三跨度图表| www.17gp.com-中国福彩报纸预测| www.237079.com-全能中彩彩票| www.827353.com-苹果x原彩显示没有| www.55498.com-浙江11选五爱乐彩| www.09423.com-福彩3d3d谜语| www.873294.com-体彩排列3现场开奖| www.019274.com-贵阳市体彩中心主任| www.642821.com-汪汪时彩-| www.824010.com-买彩票需要算数吗| www.974249.com-大发快三坑人不| www.fs11.com-快三对几个号中奖| www.0793.date-玩网上彩票犯法吗| www.029835.com-正规外围足彩网站| www.152586.com-uu快三代理-| www.270521.com-正规彩票平台排行| www.365466.cc-足彩投注倍数| www.300023.com-大奖网彩票网址下载| www.962253.com-福彩购买软件下载| www.cp557.com-彩票黑平台排名| www.925257.com-体彩杀号定胆2元| www.997498.com-玩快开彩票输了| www.fr27.com-福彩快3输了一百万| www.674.tv-重庆福彩店-| www.354568.com-加拿大彩票大乐透| www.526729.com-时时彩投资方略| www.679222.com-重庆中彩是违法的吗| www.813316.com-重庆时时彩彩票投注| www.907867.com-合肥竞彩店转让| www.999740.com-福彩快三怎样守豹子| www.bm41.com-福利彩票号码查询器| www.25216.cc-彩铅画的目的| www.331079.com-彩票棋牌一体平台| www.cq92.com-福彩投注站末位| www.840514.com-灰姑娘美甲彩妆学校| www.926589.com-五福彩票网正规不| www.660638.com-章鱼直播怎么买彩票| www.590139.com-足彩胜负开奖公告| www.10977.com-体彩排列3开奖号| www.47067.com-两分时时彩全天计划| www.145937.com-360彩票567-| www.238389.com-2020彩票app| www.359123.com-彩票推测-| www.668854.com-英国彩票税率是多少| www.15560.com-彩铅画大白兔奶糖| www.18rn.com-云南彩票案-| www.003945.com-中国彩票坑了多少人| www.999821.com-彩民网资料大全| www.373892.com-鸿狼彩票骗人的吗| www.549716.com-网上禁止买足彩| www.300885.com-彩票中二等奖可能吗| www.393973.com-福彩3d顺子号| www.522427.com-韩国分分彩精准计划| www.587030.com-全民网彩票-| www.sn68.com-竞彩258彩票| www.629141.com-彩票违规-| www.790014.com-好彩彩票怎么样| www.889055.com-8k彩票官方主页| 澳客网www.okw4.com| www.1622.wang-彩票中奖表情包图片| www.985900.com-送彩金18元可提款| www.604953.com-香港赛马结及派彩| www.219210.com-三分钟即开彩票骗局| www.qa87.com-093彩票官网下载| www.426833.com-威尼斯人彩票| www.275232.com-时时彩怎么计算| www.653597.com-盈彩商城-| www.662156.com-好彩票正规官方网站| www.811318.com-哪些彩票中奖率高| www.960623.com-彩票注册送10元| www.20jv.com-19006期胜负彩| www.773362.com-送彩金38棋牌游戏| www.851402.com-快三心得走势| www.fr70.com-福彩快三技巧视频| www.62kz.com-双色球松江彩民中奖| www.059777.com-福彩公益活动| www.201364.com-购买双色球彩票网站| www.177454.com-快三中奖助手官网| www.20917.com-大发优信彩票邀请码| www.01792.com-搜狗彩票网-| www.883594.com-彩票梦想站改名了| www.023.name-彩票世界的永久官网| www.468638.com-福彩开市时间| www.713692.com-福彩彩图今天的| www.829328.com-新乐彩app下载| www.930890.com-体彩6加1怎么玩| 好彩www.60123m.com| www.lq61.com-关于买彩票的新闻| www.52er.com-下载牛彩网官方| www.306277.com-体育彩票中奖查询| www.627895.com-大发彩票被黑| 500彩票网www.606865.com|