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天

知道了
彩01彩票 www.111369.com-幸运分分彩是哪里的| www.hx57.com-体彩e球彩中奖规则| www.331367.com-彩票二元网-| www.404433.com-东北彩礼多少| www.522112.com-天雯网彩票论坛| www.597838.cc-大发快三赢钱投注| www.4182.cm-哪个彩票平台可靠| www.954607.com-足彩奖金规则| www.31057.com-有多少人彩票中奖| www.89574.com-577彩票平台苹果| www.659694.com-联盟高频彩开奖直播| www.805719.com-体彩种类及奖金种类| www.949612.com-高频彩为什么要拉人| www.im.com-彩票黑彩网址快三| www.zg28.com-七七乐彩走势图表图| www.9532.online海南七星彩投注网仔| www.7381.vip-懂球帝可以买彩票吗| www.57779.com-我中啦彩票走势图| www.198997.com-快乐彩票抢红包| www.319165.com-彩票pc蛋蛋-| www.477071.com-下载彩神通-| www.670041.com-海南彩票买吗怎样买| www.781404.com-约彩彩票合法| www.911312.com-k彩彩票二维码下载| www.2035.net-青岛体育彩票| www.398928.com-七星彩两期四重号| www.523425.com-福彩网免费资料大全| www.722875.com-1688彩票提供| www.824617.com-全民汇彩票首页| www.908226.com-快乐彩票手机app| www.974982.com-大乐透大彩网走势图| www.lw6.com-快三中奖查询表| www.927038.com-彩票达人三五个尾巴| www.92800.com-在微信上能买福彩吗| www.vw11.com-网停售网络彩票| www.708639.com-分分彩庄家-| www.862548.com-昨天福彩多少号码| www.981876.com-那个可以网上买彩票| www.pq88.com-双彩网论坛官网| www.591487.com-977彩票怎么样| www.89vw.com-赤峰彩票站转让信息| www.7624.xyz-新浪爱彩用不了| www.37350.com-万彩宝app-| www.19rt.com-得力彩票23993| www.336586.com-乐彩网3的福彩| www.433555.com-最新的彩票平台程序| www.464986.com-懂球帝足彩怎么领奖| www.633066.com-体育彩票nba彩票| www.772669.com-签到送418彩金| www.890488.com-彩24彩票-| www.99963.cc-立彩彩票苹果| www.894.net-彩特吧高手网| www.871231.com-彩71彩票官网| www.953295.com-中福彩官网-| www.dk9.com-分分时时彩是骗局吗| www.zb59.com-彩票会作假吗| www.89gq.com-福彩3d今日便民浅| www.217217.cc-网上一分快三能玩吗| www.398087.com-福彩3d图库西赵口| www.1253.mobi-快三对两个号码| www.7376.biz-上海体育彩票销售点| www.871564.com-彩票工具下载| www.an5.com-快三群主怎么赚钱| www.5060.biz-福彩3d开试号| www.258581.com-彩客网比分完整比分| www.396480.com-彩虹画儿童画图片| www.610312.com-彩多多彩票合法吗| www.882151.com-澳洲快三开奖走势| www.999039.com-彩乐汇彩票合法| www.wi95.com-下载甘肃体彩快三| www.67kc.com-附近的彩票站在哪里| www.4013.cn-彩票app澳门永利| www.725282.com-彩票与赌博-| www.837635.com-网上黑彩票违法判刑| www.940.cm-彩票实战讲座第一节| www.661983.com-竞彩3串1中奖图| www.815519.com-中彩堂-| www.898331.com-今晚六会彩开奖结果| www.761964.com-竞彩技巧app下载| www.827382.com-博彩属于诈骗吗| www.885916.com-众达彩票app下载| www.960414.com-中彩票1亿-| 中国福利彩票www.6364.com| www.0778.cn-国彩邀请码-| www.319219.com-江西快三遗漏情况| www.98do.com-彩运无限是可靠吗| www.113439.com-福利彩票郑州店| www.0nj.com-溢彩年华书柜| www.492231.com-黑彩票网站链接| www.614605.cc-大奖快三是什么意思| www.o48.club-数学家研究彩票投注| www.240038.com-彩神ix下载-| www.92644.com-海安彩票大奖| www.079040.com-大玩家彩票快3| www.150536.com-迅盈彩票官网下载| www.670909.com-七彩色花-| www.804748.com-彩票程序源代码| www.890655.com-红彩会手机版下载| www.959818.com-金星vr3分彩官网| 500彩票www.701496.com| www.89531.com-3d字谜新彩吧总汇| www.563295.com-彩民乐和阳光探码| www.3524.xyz-谦喜彩票提现不到账| www.w88.cm-彩票大小单双走势| www.93di.com-一寸彩照是什么颜色| www.09254.com-中国体彩电话投注| www.312911.com-幸运跑马彩开奖结果| www.576063.com-v8彩票可信吗| www.524148.com-最快彩票开奖| www.112561.com-优点彩票-| www.052299.com-彩神v软件是诈骗吗| www.29230.com-爱乐透彩票增强版| www.647011.com-彩票工具软件破解| www.983253.com-二分时时彩走势图| www.815993.com-全民彩票用户注册| www.999364.com-哪个足彩好中| www.tx33.com-万彩吧彩票开奖查旬| www.346155.com-彩票分析图-| www.408577.com-七星彩网上在哪里买| www.510932.com-彩虹歌词是-| www.67018.com-安阳福彩中心| www.02ql.com-澳门惠民彩2017| www.492937.com-彩票黑平台成本| www.070214.com-数学家打彩票| www.159151.com-福彩500网走势图| www.4716.vip-nba投注量彩客网| www.41865.com-中彩吧可靠吗| www.vc99.com-银川快三玩法| www.796405.com-梦见彩票中奖去兑奖| www.871427.com-福彩彩吧图库| 中华彩票www.897957.com| www.29290.cc-彩虹瓶颜色搭配图片| www.090706.com-5258彩票-| www.65872.com-高手老彩民论坛| www.351244.com-体彩世界杯在哪里买| www.969222.com-天天彩票骗局| 易彩堂www.55885m.com| www.31807.com-彩8彩票电脑版| www.167116.com-福彩北京快三开奖| www.290694.com-白菜网免费彩金| www.59tm.com-体彩店还能兼营什么| www.007978.com-1分块3彩票-| www.62wm.com-淮安市福利彩票网| www.332900.cc-快乐彩票靠谱吗| www.601595.com-我真中了彩票一等奖| www.684336.com-彩票开奖查做| www.zr99.com-七彩云南欢乐世界| www.12ra.com-统一彩票骗局| www.77992.cc-手机可以买快三吗| www.902.live-彩虹颜色英语| www.79iq.com-百彩网综合资料| www.7571.loan-东方秒秒彩-| www.219044.com-七星百姓彩票网| www.676871.com-彩色压印艺术地面| www.4438.vip-众亿彩票平台| www.9200.vip-500彩票双色球| www.133395.com-市政彩钢围挡价格| www.677858.com-彩票中奖故事双色球| www.1702.org-体彩大乐透93| www.010173.com-彩票中奖几个亿| www.325507.com-七星彩局王-| www.15964.com-体彩开奖中国| www.2465.pw-重庆时时彩百科| www.282135.com-七乐彩预测最准号码|