QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper响应式全屏banner图片滚动轮播代码

原创商用 swiper响应式全屏banner图片滚动轮播代码

jQuery基于swiper.js库制作响应式宽屏的banner图片文字滚动轮播,支持触屏滑动切换。适用于响应式网站图片布局展示代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/swiper.css" />

2、head引入js文件

<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
<script type="text/javascript" src="js/swiper.js"></script>

3、body引入HTML代码

<div class="wqd-section-three">

	<div class="section-three-fix">
		<h5 class="animate-img wqd-h5 animate-text" data-lazy="lazy">用户口碑推荐</h5>
		<p class="animate-img wqd-p animate-text" data-lazy="lazy">百万企业信赖推荐,市场口碑零差评,性价比高</p>
		<a href="#" class="animate-text wqd-btn-blue animate-btn" data-lazy="lazy">立即创建</a>
	</div>
	
	<div class="section-three-box">
	
		<div class="section-box-title">
			<em></em>
			<em></em>
			<em></em>
		</div>
		
		<div class="section-img">
			<img src="images/sectoin-im3.jpg" width="100%" alt="" style="opacity:1;">
			<img src="images/section-bg3-61.jpg" width="100%" alt="">
			<img src="images/section-bg3-21.jpg" width="100%" alt="">
			<img src="images/section-bg3-31.jpg" width="100%" alt="">
			<img src="images/section-bg3-71.jpg" width="100%" alt="">
			<img src="images/section-bg3-51.jpg" width="100%" alt="">
		</div>
		
	</div>
	
	<div class="slipe-box">

		<div class="bannar">
		
			<div class="slipe-left"><img src="images/banner-arow.png" alt="" /></div>
			<div class="slipe-right"><img src="images/banner-arow.png" alt="" /></div>

			<div class="swiper-container slider-two">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">太清凉茶甜品网站需要展示产品色香味的特色,微企点的强大的页面布局功能和参数调整,非常专业展示了产品的特色,浏览体验非常好。</p>
							<h6 class="animate-text" data-lazy="lazy">太清凉茶甜品 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">非鱼是一个壁画墙绘网站,需要炫酷展示产品。微企点的动态交互设计非常好用,就算你完全不懂代码,那种漂亮的边栏弹出、鼠标停留展示多层内容等动画特效,也可以轻松实现。</p>
							<h6 class="animate-text" data-lazy="lazy">非鱼墙绘 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-1.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">画家张路华的个人网站,直接采用微企点预设的元素组件、通栏、单页、模板,自由搭配,灵活替换,大大提高了建站效率,展示专业炫酷。</p>
							<h6 class="animate-text" data-lazy="lazy">张路华官网<span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-2.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">比较了不少建站工具,发现微企点是建站平台中操作便捷,设计风格也是时下时尚的,非常符合领思官网的定位和审美。</p>
							<h6 class="animate-text" data-lazy="lazy">领思云  <span class="slider-auther">CEO 郭雨剑</span></h6>
						</div>
						<img src="images/section-bg3-3.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">山里鲜是一个电商网站,对于网站功能的要求高。微企点内外兼修,除了能实现炫酷展示,还有强大的网站功能,满足营销推广所需。</p>
							<h6 class="animate-text" data-lazy="lazy">山里鲜 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-6.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">用微企点做了一套内画鼻烟壶网站,这是一个对设计师友好的建站工具,让不懂代码的人也能做网站。功能简洁易懂,小白大牛都适合。</p>
							<h6 class="animate-text" data-lazy="lazy">鼻烟壶 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-5.jpg" alt="" />
					</div>
				</div>
				<div class="swiper-pagination swiper-pagination-two"></div>
			</div>
			
		</div>
		
	</div>
	
</div>


<div style="height:540px;"></div>


<script type="text/javascript" src="js/banner.js"></script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
时时乐上海开奖结果 www.927930.com-7位数彩票怎么买| www.cp9969.com-今日湖北快三走势| www.85855.com-彩力板-| www.588001.com-施乐彩色复印机价格| www.779770.com-福利彩票布衣独胆王| www.939735.com-众盈娱乐五分快三| www.qj0.cc-青海快三彩控| www.764570.com-彩票77平台-| www.21636.cc-亿彩是什么软件| www.005364.com-手机挣钱高频彩骗局| www.409949.com-广州彩色透水地坪| www.130945.com-先领证还是先给彩礼| www.77579.cc-体彩福彩的开奖结果| www.964489.com-足彩新浪必发指数网| www.62dd.com-360福彩杀号| www.346788.com-李彩桦单身部落吻戏| www.75cu.com-彩票详解-| www.8833.ren-62彩票导航-| www.12eq.com-肥东体彩-| www.042.online-免费彩票代打骗局| www.497686.com-辉煌体彩-| www.80yq.com-网络彩票倍投的骗局| www.548805.com-足球竞彩讨论论坛| www.068518.com-彩gg网页版-| www.255138.com-时时彩概率科学买法| www.96200.com-彩之星登陆页面| www.220918.com-湖北快三推荐一定牛| www.309258.com-彩票对打刷流水赚钱| www.388888.com-体彩大乐透购买中心| www.92748.com-芸彩数字营销骗局| www.877869.com-重生之彩票起家| www.561115.com-福建cc彩球网| www.06363.cc-福彩3d中奖新闻| www.461431.com-购彩老黄历-| www.670472.com-七星彩票今天开奖| www.693483.com-福建省福彩中心主任| www.977166.com-河南濮阳彩礼多少钱| www.725496.com-933彩票ios版| www.740784.com-3000万彩票网址| www.872194.com-四川体彩大乐透| www.ko8.cc-十分快三是什么彩票| www.6gp.cc-国外彩票算法| www.919748.com-体彩打印软件破解| www.307272.com-聚宝快三真的赚钱吗| www.851895.com-内蒙古体彩十一选5| www.967676.com-彩票网群聊-| www.vb92.com-3d彩吧图彩字迷| www.99jx.com-教教我买彩票选号| www.464866.com-新加坡福彩官方网站| www.600209.com-博雅彩票可信吗| www.712525.com-极彩娱乐登录平台| www.801162.com-郎咸平彩票视频| www.917979.com-900彩票正不正规| www.wd84.com-体彩排3试机号今天| www.029998.com-泉州快三彩票| www.151514.com-彩票有多少个数字| www.243520.com-正常买彩票的app| www.69754.com-官方体彩助手app| www.683348.com-网上咋买彩票| www.822775.com-福彩3d家彩开机号| www.963821.com-500彩票网页版| www.zm36.com-分分快三计划和值| www.4809.cc-彩虹六号玩家视角| www.726286.com-手机咋买彩票| 顶级娱乐www.767198.com| www.008134.com-酷彩彩票靠谱吗| www.128950.com-七乐彩现在游戏规则| www.227709.com-广西快三百科| www.331022.com-乐彩大发快三下载| www.210489.com-吉林快三黑彩案例| www.166183.com-江苏快三开奖结果| www.428001.com-足彩105期-| www.763342.com-苏州彩票店转让| www.843722.com-美国彩票是国营的吗| www.913260.com-彩民之家特供| www.kt6.cc-快三砍龙口诀| www.872916.com-网络彩票加盟代理| www.954494.com-彩宝彩票官方网址| www.cai663.cc-北京体彩十一选5| www.553771.com-山西老张竞彩| www.626438.com-姓名选彩票-| www.553898.com-nba体彩竞猜网| www.630930.com-飞鱼彩票开奖时间| www.257658.com-易旺彩票合法| www.008342.com-点我更多精彩| www.715219.com-网上买彩票几百人| www.803495.com-七星彩番外明月珰| www.881034.com-人人平安彩票靠谱吗| www.949672.com-体彩试机号查洵| www.999085.com-分分时时彩是否有假| www.if82.com-代买彩票法律规定| www.a02.loan-上海快三秘诀| www.66263.cc-排列三彩宝独胆| www.77441.cc-彩88双色球下载| www.183130.com-福彩开奖查询| www.293503.com-大发快三大小心得| www.za.cc-民间高手破解彩票| www.927205.com-凤凰彩票提款密码| www.ob31.com-竞彩胜平负-| www.115360.com-彩票511大发快三| www.273396.com-福彩几加几什么意思| www.218876.com-大发快三邀请码吧| www.304082.com-甘肃快三一定| www.123427.cc-彩票带单骗局| www.613786.com-河南快三中2个数| www.718362.com-在线看彩票-| www.810218.com-足球竞彩腰折怎么算| www.891721.com-现在038彩票| www.968272.com-8828彩票真骗局| www.js65.cc-五百彩票直播网| www.zc40.cc-彩票分析软-| www.676759.com-快三倍投倾家荡产| www.762573.com-彩票批发多少钱一张| www.43288.com-彩票网购还恢复吗| www.13oh.com-中彩那天试讲录音| www.0676.org-彩票机转让要多少钱| www.ot94.com-快三计划倍投| www.681717.com-香港5分彩骗局| www.mk87.com-加微信送38彩金| www.782677.com-宏发娱乐彩网| www.941377.com-体彩销售话术| www.o17.net-80彩票平台靠谱吗| www.143254.com-彩票网站如何风控| www.353921.com-五百万彩票网真吗| www.585070.com-好彩酒店-| www.689873.com-盛大娱乐彩票app| www.820922.com-彩钢板规格型号| www.985159.com-体彩店如何提高人气| www.37ud.com-新中国竞彩网计算器| www.43455.com-七星彩历史开奖记录| www.035022.com-彩礼江西-| www.128734.com-卓易彩票app下载| www.041510.com-快三黑彩骗局| www.zj63.com-河北福彩好运2| www.970902.com-迷彩图片-| www.193357.com-福建福彩快三开奖| www.626508.com-彩民堂客户端官网| www.50070.cc-彩神88合法吗| www.790709.com-七星彩机选在线机选| www.910078.com-福彩3d玩法与技巧| 500彩票www.50064g.com| www.520603.com-快三限号-| www.400686.com-彩36彩票网官网| www.579134.com-彩民喜中大奖| www.638740.com-福彩的属性是| www.312152.com-博彩一开始怎么推广| www.776239.com-跑马幸运彩走势图| www.943500.com-希望手游彩票靠谱吗| www.cp0770.com-内蒙快三助手| www.308962.com-福彩3d绝对布衣1| www.wm60.com-湖北快三推荐号连号| www.962274.com-看彩72变-| 大赢家彩票平台www.375983.com| www.mt20.cc-e球彩助手官方下载| www.c44.club-360彩票官方下载| www.977235.com-福彩3d+试机号| www.aw17.com-恐龙快三-| www.s55.cc-福彩吧彩票中心| www.88vw.com-668彩票官网| www.6789.org-打彩票的技巧规律| www.90123.com-下载七彩视频| www.087158.com-3d彩票技巧与方法| www.553476.com-nba博彩合法化| www.960252.com-手机购彩软件安全吗|