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.290275.com-彩库宝典开码结果| www.588968.com-天天彩经网-| www.660259.com-爱彩打-| www.231312.com-快三单双算法| www.6838.org-彩乐爆安全吗| www.623549.com-曲昌春讲故事看竞彩| www.714872.com-韩国一点五分彩开奖| www.301325.com-福彩三d浙江走势图| www.49jq.com-华益彩票-| www.6420.cm-春秋彩票苹果手机版| www.045353.com-彩神通会员是真的吗| www.608316.com-竞彩计划单稳赚| www.332142.com-凤彩网双色球杀号| www.dr35.com-大发快三免费下载| www.76332.cc-彩票在线投注app| www.037792.com-乐彩网被骗案例| www.122999.cc-梅州彩票中奖新闻| www.031761.com-釉下彩怎么画| www.763612.com-皇冠彩票正规么| www.874347.com-吉林快三初几开始| www.954873.com-093彩票下载软件| www.dm89.com-中国快三第一| www.zx58.cc-重庆吋时彩开奖视频| www.425460.com-七彩冰淇淋做法大全| www.527555.com-时时彩三星和值走势| www.597927.com-足彩一等奖14场| www.669710.com-太阳2彩票网可靠吗| www.692905.com-竞彩赛程-| www.897273.com-澳洲有哪些彩票| www.lo86.com-58彩票是正规的吗| www.s60.mobi-打开福彩天气网| www.51oz.com-彩旗是谁-| www.6052.biz-中国福利彩票邓| www.964459.com-足彩比分气新浪| www.c14.cc-鸿运彩票软件下载| www.195939.com-江西快三推荐| www.29ks.com-搜狐竞彩-| www.456964.com-体彩排列三字迷总汇| www.569582.com-彩票线上购买模式| www.775636.com-赢彩票天下与你同行| www.867947.com-七星彩资料-| www.c2.net-湖北快三预测一定牛| www.117668.com-网络彩票幸运快三| www.633396.com-分分彩雪球-| www.178596.com-彩乐乐网-| www.959148.com-御彩轩新版手机| www.52283.cc-趣赢彩票注册| www.669908.com-什么彩票四个数| www.485454.com-赢彩网站谁建的| www.b83.com-海南七星彩梦册大全| www.641442.com-体彩宣传语图案| www.52683.cc-中国福彩快乐彩开奖| www.091823.com-中国体彩网论坛| www.238810.com-彩金套利教程| www.05877.com-天津体彩下载app| www.337965.com-海南福彩快2官方| www.122541.com-澳门彩金骗局| www.66yy.com-中彩在线贺文是谁| www.3025.top-金宝彩网站-| www.8853.win-彩票3d出号漏洞| www.850675.com-外国彩票截止就开奖| www.933750.com-福彩高频彩app| 博亿彩票www.662by.com| www.ju40.com-彩计划app官方| www.s12.top-网罗爱彩专家专栏| www.55uz.com-体彩站新思路| www.0419.cc-彩明乐图-| www.6229.pw-迪士乐园彩票| 亿万彩票www.456826.com| www.361144.com-六和开彩开奖结果| www.360.xyz-37彩票网站-| www.716885.com-儿童彩铅画4~9岁| www.828678.com-7u彩票-| www.932009.com-网上在哪买七星彩| 福彩www.15355z.com| www.25tj.com-快三开奖摇骰子| www.387.date-蚌埠体彩中心地址| 凤凰彩票www.88266s.com| www.129412.com-体彩大乐透奖金规则| www.230307.com-728彩票苹果版| www.359247.com-体彩七星彩如何买| www.967634.com-手机选彩票软件下载| www.zk72.com-福利彩票好运三单式| www.663835.com-新版时时彩平台源码| www.766765.com-彩票双色球生日选号| www.846619.com-姜山冷门唯彩看球| www.947364.com-新彩吧3d字谜画谜| www.cai7266.com快三开奖助手免费| www.gr00.com-河南彩票22选5| www.461230.com-国家彩票官方网站| www.569137.com-甘肃快三两码遗漏表| www.655367.com-360彩票安全购彩| www.136285.com-彩铃下载免费| www.940935.com-七乐彩三区-| 大赢家彩票网www.178167.com| www.431177.com-中彩网3d数据| www.11ur.com-500彩粟网-| www.615785.com-中彩国际客服| www.056282.com-智能选彩票-| www.186182.com-三分快三是哪里的| www.370456.com-时时彩开源系统| www.ob22.com-彩票33-| www.49pq.com-体育彩票无人售票机| www.1919.cm-时时彩最稳赚钱技巧| www.574035.com-世纪星彩票-| www.656457.com-150彩票-| www.739677.com-快乐三彩票-| www.812397.com-福彩三d乐彩论坛| www.871463.com-体彩排列三图| www.921376.com-彩票龙虎什么意思| www.973845.com-彩票分析预测原理| 大赢家彩票平台www.137651.com| www.eo49.com-大发快三就是个坑爹| www.303280.com-2006年福彩和值| www.927098.com-天天彩1-| 众乐彩票www.916044.com| www.0161.me-江苏彩-| www.309085.com-奇妙pk彩票软件| www.474250.com-金誉彩票手机版| www.255.cn-彩钢门头-| www.636093.com-彩虹六号第一年干员| www.019561.com-四川体彩大乐透| www.509589.com-时时彩开奖源| www.10845.com-澳客网彩票论坛| www.430766.com-会员登陆一永利彩票| www.0738.cn-01彩票是怎么回事| www.8205.vip-徐州彩票8000万| www.85528.cc-彩票缩水软件是什么| www.4287.biz-手机虎扑篮彩神棍区| www.94237.com-体彩责任彩票是什么| www.319020.com-七星彩万能十二码| www.2793.biz-k8彩票平台注册| www.680783.com-怎样戒掉手机买彩票| www.784434.com-2019网络售彩| www.853285.com-幸运彩票提现失败| www.906234.com-吉林快三有漏洞么| www.965587.com-彩票加注什么意思| www.lb4.com-安安徽快三开奖结果| www.271182.com-8亿彩下载-| www.385422.com-彩票投注免费领彩金| www.619269.com-云南省体彩中心电话| www.680765.com-时时彩倍投技巧| www.740025.com-福彩多少位-| www.800074.com-现在卓易彩票用不了| www.858231.com-博彩分红项目靠谱不| www.903673.com-中国体彩票开奖号| www.954318.com-通博彩票的网址| 星际www.930xj.com| www.cg12.com-福建快三预测推荐表| www.185922.com-玩快三有什么技巧| www.393702.com-竞彩网触屏版首页| www.622607.com-福彩3d图片第三版| www.213421.com-信博彩票快三| www.ou04.com-最新彩票信息| www.u32.net-用软件买彩票可靠吗| www.584442.com-k73彩票app-| www.96014.com-千亿彩票手机版| www.227665.com-福彩有没有一分快三| www.984598.com-彩票模拟器投注| www.40jd.com-网上能买七星彩吗| www.074452.com-北京长乐快三查询| www.179757.com-福利彩票双色球| www.364233.com-红太阳彩票-| www.502618.com-一号彩票代理人有吗|