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天

知道了
亚洲28 www.227600.com-快3彩票正规| www.542233.com-购彩平台信誉好的| www.009354.com-178彩票没邀请码| www.194376.com-正规彩票网-| 福利彩票www.78700b.com| www.34nr.com-福彩基本走势图| www.7628.pw-凤翔彩票网址是| www.024197.com-往期中奖彩票| www.251359.com-河北快三开一定牛| www.562812.com-34期福彩-| www.29515.com-天天彩票网四不像| www.612700.com-飞艇彩票怎么玩法| www.120464.com-宝马集团彩票注册| www.893776.com-大财神彩票园| www.99dh.com-江西快三买了就不出| www.81814.com-中彩票的命-| www.247919.com-江苏快三是不是有假| www.643612.com-大千娱乐彩票可信吗| www.v95.net-四季彩票安全吗| www.6652.top-6合万彩-| www.544026.com-福彩小军3d第二版| www.34vc.com-七星彩中间错了一个| www.145228.com-福彩3d彩报图| www.356424.com-足彩平负什么意思| www.469446.com-怎么购买境外足彩| www.769224.com-好彩跟老师翻倍投| www.839888.com-正宗ig传统彩| www.oi11.com-江苏福彩3d试机号| www.1915.cc-11145彩民论坛| www.72388.com-盈盈彩官网注册账号| www.212262.com-9彩官方app-| www.428255.com-金手指足彩缩水公式| www.678914.com-九购十分彩江苏快3| www.898143.com-彩票开奖相关术语| www.87593.com-京东买彩票在哪里买| www.4815.biz-山西省体彩兑奖中心| www.12zi.com-好彩纪念版铁盒| www.995861.com-足彩ios-| www.ln53.com-旺彩双色球苹果下载| www.72ma.com-重庆约彩彩票| www.529260.com-彩虹糖的梦-| www.246808.com-福利彩票中奖概率| www.525957.com-超信做彩票帮投单| www.828704.com-永丰彩票-| www.1926.club-体彩天下软件下载| www.9685.cm-c8万彩.cn-| www.199995.com-幸运彩河南福彩网| www.220239.com-678彩票网-| www.515328.com-哪里买七星彩| www.637111.com-彩虹六号手机妹壁纸| www.863990.com-福彩上午领奖时间点| www.984791.com-彩8福利网-| www.28yf.com-腾讯彩票计划软件| www.1314.net-体彩刮刮乐试刮| www.57721.cc-彩票销售代表工资| www.106926.com-中国足球竞彩计算器| www.231516.com-豪彩娱乐app下载| www.355969.com-玩快三如何止损| www.509557.com-官网三星福彩app| www.622862.com-兰州开彩票店| www.739151.com-竞彩网骗局-| www.838405.com-大发快三一天多少期| www.953215.com-台湾福星彩官方网站| www.13833.com-香港时时彩开奖结果| www.070881.com-365彩票怎么安装| www.228366.com-四川彩礼价目表| www.987691.com-乐米彩票安卓版| www.vm94.com-冮苏快三开奖走势图| www.0103.cn-彩字的网名大全| www.13563.com-体彩竞彩足球靠谱不| www.098138.com-深圳福彩站点转让| www.262651.com-天津福彩快三开奖| www.248168.com-彩票99客户端下载| 大赢家彩票网www.54400x.com| www.114268.com-陈华赌一胆福彩| www.924902.com-秒速快三怎么赢钱| www.364818.com-体彩买什么好| www.675629.com-cc彩球网会员登陆| www.274850.com-七乐彩360计算器| www.847379.com-福彩3d每期计划| www.985446.com-彩票充一千颂| www.ir62.com-手机彩票网软件| www.74hl.com-99彩票挂机软件| www.3676.cn-佳能彩色复印机维修| www.7110.net-多赢在线彩票app| www.56786.com-海南七星彩图片大全| www.095303.com-湖南彩票中奖| www.213150.com-湖北快三购买官网| www.7636.top-新浪彩票竞技网| www.025570.com-大发彩票是不是黑庄| www.424733.com-彩票中了5万怎么领| www.8914.com-重慶时时彩官网| www.943073.com-703彩票苹果版| www.na06.com-江西快三下载安装| www.6865.biz-大奖彩票官方软件| www.979122.com-好彩柠檬香烟价格| www.55486.com-浙江快乐十二爱彩乐| www.255582.com-彩富网彩富高手网| www.390277.com-熊猫彩票推荐人| www.737600.com-福彩台湾3d-| www.9688.live-彩票网站哪里做得好| www.571296.com-彩票中二等奖| www.698971.com-零基础学彩铅入门| www.5012.wang-吉林块3彩票| www.56365.cc-福彩快3速查表图片| www.944499.com-彩票248所有版本| www.011156.com-福利彩票大乐透购买| www.51412.com-体彩幸运赛车| www.6540.shop-金牛彩票下载安装| www.280080.com-时时彩预测神器| www.781780.com-分分彩不死挂机方案| www.371731.com-好彩0567.平台| www.271729.com-湖北快三彩票| www.466586.com-七彩乐对几个号有奖| www.420044.com-彩票app靠谱吗| www.539586.com-广东政府彩购网| www.cp135.com-福彩快三是不是骗局| www.3580.biz-360连红彩票| www.5484.vip-福彩先锋增强版| www.325233.com-福彩三d组选怎么买| www.531272.com-艾彩网-| 六冠彩票www.liuguan000.com| www.00rd.com-彩虹怎么画-| www.24818.com-夜空画法彩铅简单| www.021267.com-快乐彩票三抢红包| www.144377.com-竞彩2c1保本对冲| www.344494.com-时时彩微信交流群| www.677711.cc-银川中彩票-| www.787643.com-彩经网排三胆码预测| www.896215.com-内蒙休彩十一选五| www.jp02.com-火箭彩票vip分身| www.4jd.com-福利彩票怎么中大奖| www.9826.top-竞彩足球竞猜版| www.776261.com-利彩开机号-| www.617387.com-现有彩站出兑| www.sz2.com-江西快三号码推测| www.819620.com-体育彩票兑换地点| www.948743.com-南宁快三开奖| www.95.cx-描写彩虹的诗| www.929.me-七星彩怎么算是中奖| www.7344.xyz-竞彩公益金-| www.604952.com-中澳彩票官网| www.cp8760.com-微信快3彩票群| www.41ww.com-彩票大乐透的软件| www.5817.wang-足彩345关怎么算| www.73582.com-高频彩背后黑幕众多| www.106839.com-上海快三技巧134| www.6zo.cc-足彩大乐透走势图| www.048217.com-快三缩水工具| www.073777.com-彩会的意思-| www.201972.com-彩71app下载| www.72588.com-福彩3d报纸10期| www.307354.com-韩国彩票官网| www.369946.com-体彩屋是犯法的吗| www.441037.com-彩钢瓦机双层多少钱| www.577510.com-彩虹糖小孩能吃吗| www.639972.com-福彩3d概率学分析| www.698747.com-k彩游戏2.0安卓| www.772621.com-时时彩分成-| www.879799.com-吉林快三犯法吗| www.943517.com-重庆时时彩登录| 惠民彩票www.hm2777.com| www.ke96.com-浙江彩票11选五| www.004727.com-鲛人鲨福彩3d预测|