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天

知道了
1分快三 www.52387.com-内部万元报彩吧图库| www.030951.com-永乐彩票下载| www.110324.com-彩票业改革-| www.200082.cc-彩票开奖今天| www.272700.cc-邀请玩彩票是骗局吗| www.562579.com-8g登录神话彩票| www.639887.com-东方亮彩曹云哪里人| www.742722.com-酷彩官网下载安装| www.819980.com-游戏机彩票纸兑换| www.895340.com-看下天下彩开奖结果| www.962430.com-靠谱的时时彩平台| 盛彩网www.41518v.com| www.gs98.cc-大发分分彩免费计划| www.zl63.com-彩票500app-| www.28od.com-今日说法彩票| www.0659.vip-香港快乐5分彩| www.7536.xyz-慕明明彩票诈骗案| www.26831.cc-福彩组选走试图| www.71587.com-深圳龙华区福彩| www.056070.com-十二生肖彩票| www.137428.com-网上跟计划买彩票| www.219054.com-南国彩票论坛| www.293016.com-智慧彩票ios版| www.369893.com-福彩3d美女胆码图| www.470208.com-快乐六分彩-| www.555931.com-红彩会登录手机登录| www.629494.com-093cc彩票官网| www.700244.com-彩神争争霸ll| www.778470.com-彩之乐是什么网站| www.959457.com-彩票微信群名字| 全民汇彩票www.52303h.com| www.fj04.com-上海快三全天计划| www.xw27.com-立彩助手-| www.21kh.com-中国福利彩票贪污案| www.935.space-今晚澳门彩开奖结果| www.5430.xyz-3d彩票辅助软件| www.10226.com-足彩310走势图| www.54362.com-网彩跟群计划倍投| www.98656.cc-1分彩开奖分析| www.064804.com-腾讯彩票双色球预测| www.196394.com-体彩开奖号码| www.275972.com-快三路线北京末班车| www.372862.com-统一彩票骗局| www.ok9.cc-甘肃体彩十一选五| www.pz27.cc-人人中彩票合法吗| www.01pe.com-风雨后的彩虹意思| www.75ha.com-看彩票结果-| www.1340.com-七星彩今晚获奖码| www.9288.live-体彩超级大乐透| www.47796.com-鸿运彩票网登录方式| www.91261.com-好彩蓝莓爆珠产地| www.051091.com-中国第一快三| www.205174.com-今天喜乐彩开奖结果| www.276489.com-湖北快三牛定一| www.356374.com-斐波那契数算彩票| www.423941.com-金彩彩票网是真的么| www.520868.com-体育彩票销售点申请| www.588609.com-七星彩奖结果查询期| www.661514.com-乘风网彩票合买| www.788569.cc-浚县彩礼多少钱| www.861277.com-体彩任选3中奖规则| www.925564.com-玩足彩用什么app| www.981142.com-八马彩票登入| www.rx92.com-腾讯彩票是谁的| www.9lf.com-体彩的号码是多少| www.63sq.com-28彩票源码-| www.0259.pw-时时彩开奖图表| www.7862.biz-胜负彩购彩技巧| www.36373.com-品彩杨幂-| www.79583.cc-福彩3d字谜迷| www.026682.com-体彩兑奖-| www.097752.com-鑫彩网彩票客户端| www.160047.com-体育彩票手游彩| www.292268.com-八八彩票下载| www.358933.com-体育彩票是几个好| www.439418.com-福彩够三网真的假的| www.527895.com-百乐娱乐时时彩注册| www.636004.com-河南七星彩开奖日期| www.716108.com-乐米彩票怎么停了| www.786573.com-俄罗斯全民彩| www.856730.com-体彩七星彩摇奖机| www.916722.com-彩票入款优惠2| www.972845.com-彩客网手机版下载| www.bd00.com-江西11选五多乐彩| www.rc84.com-香港彩票走势图| www.00qp.com-秘鲁彩虹山形成原因| www.64pn.com-足彩中奖概率是多少| www.0160.top-意大利威尼斯彩色岛| www.7432.cc-上海竞彩店申请条件| www.20201.cc-今曰竞彩推荐| www.58713.cc-中国福彩彩报| www.024823.cc-澳门三分彩开奖结果| www.091038.com-众彩网app-| www.150012.com-51中彩票app| www.248888.cc-江苏快三号码统计| www.313663.com-快三9和值有哪些| www.375848.com-彩票江苏十五选五| www.507853.com-梦彩票查询-| www.571388.com-快三秘籍网盘| www.632956.com-3d流彩网-| www.693395.com-体彩手机在线客户端| www.766705.com-凤凰快三是不是真的| www.881638.com-q彩网8位邀请码| www.954406.com-鼎博彩票app下载| 福利彩8www.flcb4.com| www.ag56.com-798彩票-| www.oy25.com-在线彩票倍投计算器| www.79.vip-重庆时时彩一天几期| www.58zx.cc-中国体彩店招| www.755.bid-新重庆时时彩遗漏| www.3978.cm-大富彩票官网| www.8853.cm-欢乐彩直播网站| www.92725.cc-时时彩数字规律概率| www.046748.com-天天中彩票旧版本| www.128611.com-福彩3d宗合走试图| www.191818.com-江苏快三一共多少注| www.256100.cc-快三彩票投注兼职| www.322516.com-竞彩大奖2019| www.381581.com-福利彩票能中奖吗| www.532089.com-获奖美术作品彩铅画| www.606536.com-足彩最大冷门| www.670633.com-中国国彩是什么| www.734557.com-广东天彩快3是什么| www.799910.com-龙之彩是不是黑平台| www.866678.com-昨天3d出什么彩票| www.921058.com-命中中彩双色球预测| www.974949.com-福彩投注站编号查询| www.ky63.com-苹果彩票网手机版| www.zq93.com-海南飞鱼彩票玩法| www.15kk.cc-天下彩票网-| www.93xs.com-海南淘彩-| www.1949.tv-乐彩论坛3d杀码| www.6629.org-双彩论让-| www.12756.com-中国彩票中心下载| www.50097.com-各种秞彩大瓶| www.87279.com-澳客彩票竞彩比分| www.029682.com-安徽快三介绍| www.092178.com-85彩票-| www.141014.com-唐龙说彩双色球| www.204242.com-买国外足彩算赌博吗| www.263844.com-彩票买多久才能中| www.498813.com-彩票近期中奖人苏州| www.559475.com-多彩网app安卓版| www.616520.com-小程序怎么买彩票| www.676116.com-福彩三地的基本走势| www.736289.cc-御彩轩计划软件免费| www.794148.com-买黑彩票判刑标准| www.857518.com-手机里福彩端| www.910858.com-87彩店-| www.963259.com-彩钢瓦防水-| 彩乐乐www.cll168.com| www.zh0.com-网上玩彩票犯法吗| www.ns88.cc-彩票是合法的赌博| www.1wt.com-彩票11选五怎么玩| www.43cg.com-澳门足彩怎么玩| www.99jj.com-五行八卦预测彩票| www.3975.cn-澳门五福彩-| www.8996.in-摩登彩票官网| www.58738.com-体彩七星开奖号| www.004108.com-福彩动物总动员杀号| www.055594.com-易博彩票手机app| www.130987.com-河南彩礼标准限制| www.190167.com-河南省快三走势图| www.250657.com-中福彩票快3|