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.776.pw-体育彩票咋玩| www.586839.com-南方双彩网今天| www.759677.com-免费注册送彩金| www.890174.com-cba竞彩在哪里买| www.981859.com-彩61平台网址| www.sv1.com-彩种计划-| www.539463.com-体彩转让需要注意| www.806150.com-竞彩258彩票下载| www.935325.com-凤凰彩票导师群| www.sy62.com-手机彩票平台哪个好| www.81nf.com-彩神通双色球手机版| www.216876.com-天天赢彩票是骗局吗| www.290190.com-大家赢彩-| www.822124.com-七星彩18143期| www.hk40.com-易彩票怎么赚钱| www.77748.com-体彩机器故障| www.542853.com-公益彩票软件| www.4046.cn-混合竞彩计算器| www.2661.com-便民工作室彩吧| www.05531.com-宏大彩票-| www.71059.com-180彩-| www.030616.com-福彩双色球杀号瘦身| www.427844.com-红彩会彩票下载安装| www.434097.com-南昌中一等奖彩票站| www.60ra.com-特区海南匕星彩梦册| www.8666.win-体彩三码预测| www.43144.com-福彩山的字迷| www.178737.com-快三和值奖金对照表| www.9496.org-市政彩钢围挡定做| www.663941.com-鸿运彩票投注站电话| www.192526.com-河北快三遗漏值最新| www.668415.com-马来西亚博彩业现状| www.788765.com-竞彩支持率-| www.897263.com-美国彩票分期领取| www.970230.com-彩神通彩票预测软件| www.626900.com-今日彩票幸运号| www.8453.org-8168彩票网站| www.582888.com-三宝体彩屋邀请码| www.717359.com-国家福彩中心| www.800088.cc-河南体育彩票48i| www.910358.com-彩99app靠谱吗| www.cq45.com-中国福利彩票159| www.495535.com-重庆时彩计划软件| www.972234.com-大众彩票会不会吞钱| www.305718.com-1元投注彩票| www.871023.com-三国梦想星彩漫画| www.rp23.com-网彩可靠吗-| www.400775.com-福彩2d组六奖金| www.257803.com-038彩票是骗局吗| www.380165.com-网易彩票代购| www.753732.com-网上买彩票何时放开| www.927192.com-福彩3g字谜总汇| www.cp3395.com-河南彩礼新规定| www.39pf.com-海南七星彩网上购买| www.1211.cn-一网彩票开奖| www.12345.com-竞彩篮球历史开奖| www.88783.cc-聚宝k3彩票-| www.666460.com-四方福彩养老院| www.809681.com-e乐彩网站-| www.370137.com-四季彩注册登录| www.481375.com-吉林快三微信群技巧| www.809821.com-好彩网3d字迷| www.805261.com-即乐彩玩法-| www.689911.com-足彩胜负彩中奖概率| www.52gn.cc-水彩画图片人物| www.8130.in-必发彩票骗局揭秘| www.33203.cc-重庆福彩无法充值| www.3686.vip-彩色复印机出租| www.11163.cc-体彩排五开奖直播| www.875240.com-重庆时彩规律| www.470520.com-国外足彩推荐网站| www.372272.com-福彩3+地试机号| www.502368.com-kk彩票登录-| www.0652.cm-中彩高手大乐透| 亿发彩票www.803733.com| www.776030.com-玩时时彩输了20万| www.844062.com-体彩中心待遇好吗| www.902311.com-北京快三规律破解| www.960449.com-好彩票注册送38元| 奔驰彩票www.750966.com| www.134813.com-好彩香烟双爆价格| www.76625.cc-快三守号怎么赚钱| www.450071.com-湖北体彩网点| www.526592.com-北京报亭可以买彩票| www.469280.com-彩票代表五行| www.062964.com-自己开提彩票| www.268953.com-3分彩的官网| www.cp5268.com-北京体育彩票| www.zv02.com-彩之家彩票网址| www.822.in-大佬彩票官方网站| www.957225.com-彩票连中专家| www.576875.com-人人彩球-| www.cai0068.com北京快三开奖结果| www.567792.com-502彩票-| www.500225.cc-体育彩票法律规定| www.595502.com-虎扑蓝彩-| www.726136.com-彩票倍投软件| www.806996.com-七号彩票邀请码| www.889784.com-给我机选一注七乐彩| 众发彩票www.589zf.com| www.918796.com-权威认证博彩| 乐趣彩www.lqc8.com| www.904545.com-南昌福彩中心怎么样| www.967555.com-体彩排列五随机选号| 凤凰彩票www.606370.com| www.ax11.com-昨天体彩5d开奖| www.415035.com-46彩下载-| www.530705.com-求个大的时时彩平台| www.20ei.com-僵约之九彩僵神| www.1110.vip-旭辉研彩下载地址| www.19zg.com-创名彩票是什么来的| www.069917.com-大发时时彩计划预测| www.546596.com-澳客彩票提交彩店| www.655686.com-彩票中奖短信截图| www.777849.com-精准快三计划| www.884646.com-体彩足球彩票怎么玩| www.978755.com-好彩1开奖走势| www.dm53.com-快三最多出过多少龙| www.3cz.cc-好的黑彩哪些| www.0831.in-哪些网站可以买足彩| www.519208.com-赢彩票软件-| www.611091.com-天马彩票提现不了| www.687101.com-福利彩票励志广告| www.790577.com-长春快三黑彩| www.873722.com-江苏快三大发计划| www.287829.com-江苏快三正规么| www.363097.com-彩虹产生的原因光的| www.442369.com-彩票站招聘信息| www.jx92.com-中国足彩网官网百度| www.928884.com-彩八仙app苹果| www.033830.com-南方彩票网走势图| www.501975.com-美洲彩合法吗| www.604460.com-01彩票的官方网址| www.712166.com-e彩彩票-| www.797660.com-芒果彩票app下载| www.870059.com-彩掌柜江苏快三| 爱彩www.004ac.com| www.45197.com-送彩佥金-| www.97182.com-福彩计划是什么| www.057691.com-贵州快3彩经网旧版| www.141242.cc-彩之源app-| www.199393.com-冮苏快三开奖公告| www.264257.com-查河北福彩快3开奖| www.353413.com-京彩手环app下载| www.874870.com-小店宝彩票正规吗| www.095164.com-福彩王素英去哪了| 瑞彩网www.809215.com| www.xd24.com-七星彩综合走势图1| www.79qt.com-彩票快三视频| www.917306.com-必赢彩票能挣到钱吗| www.81on.com-千禧彩票一线路导航| www.64cz.com-南通童彩-| www.446552.com-彩票研究院-| www.732362.com-重庆结婚彩礼一般多| www.167790.com-宁夏快三开奖号码| www.vd26.com-彩神通代理会特马| www.107398.com-500彩票辅助投| www.87776.com-微信五分彩是真的吗| www.685980.com-河南省体育彩票网| www.026506.com-老郑足彩分析的博客| www.257105.com-快三app下载苹果| www.739880.com-大彩彩票-| www.352969.com-彩漂粉的作用| www.466881.com-宏盛彩票官网|