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.8738.vip-双彩球开奨-| www.233241.com-手机彩票走势图软件| www.339674.com-手机彩票助手计划| www.266809.com-彩票赌大小能玩吗| www.562503.com-秒速赛车彩票技巧| www.701915.com-广西体彩网官网| www.370217.com-一线彩票站大火| www.075155.com-常德快三秒奶茶店| www.812861.com-手机彩铃-| www.956732.com-足彩亚盘欧赔| www.df13.com-彩神8平台-| www.n55.com-五百万彩票网首页| www.97sp.cc-博友彩平台受法律| www.5108.cn-天津市体育彩票| www.09082.com-福彩3d教父交流群| www.64746.com-竞彩被骗套路| www.981909.com-七星彩今天开什么码| www.iu56.com-竞彩篮球网-| www.368935.com-彩票开奖历史数据| www.520570.com-为什么当彩票托| www.648896.com-岩彩-| www.739477.com-爱乐透彩票过滤网站| www.874180.com-福利彩票快3北京| www.412022.com-彩票复制-| www.540090.com-二元彩票图-| www.650686.com-开户送彩金免费提款| www.764885.com-808彩票网册子| www.899403.com-下载彩83平台| www.973371.com-华彩-| www.cai9044.com看一下彩票开奖| www.417587.com-厦门个人转让体彩店| www.577069.com-彩票如何解绑银行卡| www.ou72.com-福彩3d福降天下| www.37dq.com-乐85彩票-| www.710875.com-有人中彩票吗| www.816850.com-彩票中大奖征兆| www.936513.com-彩票站邀请码| www.850.blue-福彩36-| www.39ar.com-七星彩中奖分布图| www.272068.com-下载立彩-| www.429618.com-六福彩今天开奖结果| www.631829.com-七彩云南欢乐谷门票| www.703673.com-竞彩足球网站骗局| www.794114.com-新彩吧图谜字谜| www.870589.com-鼎盛时时彩平台登录| www.933632.com-私彩平台app| www.993157.com-博雅彩票真的吗| www.fg97.com-盈彩网app-| www.051801.com-安徽快三3不同计划| www.166285.com-内蒙古快三走势图| www.c91.in-中彩乐下载-| www.tp.cc-中国竞彩网比分| www.398923.com-好运来彩票网手机版| www.59126.cc-彩票店在什么位置| www.69546.com-福彩3d查询-| www.033130.com-互联网彩票何时恢复| www.8077.xyz-五分彩趋势-| www.112018.com-下载彩票立送38元| www.2014.com-聚丰彩票合法吗| www.pb69.com-河北省快三统计图表| www.643548.com-彩318平台-| www.776005.com-体育彩票平台| www.869488.com-手机七星彩怎么下单| www.972720.com-彩虹六号经典语录| www.586848.com-南方双彩网大乐透| www.655398.com-彩掌柜彩票真实吗| www.210677.com-一分快三助赢软件| www.270091.com-彩1怎么下-| www.372400.com-65彩票下载-| www.71481.com-专业高频彩计划网站| www.9886.cm-500高频彩票| www.1754.club-鸿彩主播小雪| www.024687.com-浙江福彩积分兑换| www.764708.com-悟空彩票app| www.934529.com-动物总动员彩票害人| www.sf6.com-吉林快三是啥意思| www.199441.com-福彩历史开奖记录| www.495500.com-利记博彩提现| www.qt66.com-于海彩票结案了吗| www.841004.com-利民彩票app下载| www.918903.com-彩票投注单打印助手| www.985855.com-彩票下期预测号码| www.am59.com-安微快三-| www.mn07.com-7星彩票开奖结果| www.51nr.cc-彩博8888官网| www.756.tv-时时彩走势图彩票| www.082126.com-香港一惠民彩票| www.750462.com-福彩报纸在哪里订| www.731752.com-彩钢瓦围挡施工| www.846179.com-崔永元说彩票的节目| www.922360.com-全国各地彩礼价格表| www.978900.com-双色球彩票资讯| www.cp3135.com-新快三单机游戏下载| www.436225.com-中国移动彩票| www.834643.com-3d彩票图谜画谜| www.929340.com-地方彩票开奖的网站| 吉祥彩票www.jx68.com| www.hf04.com-一网彩票预测| www.k02.net-电子无需申请送彩金| www.591705.com-福彩三d所有图表| www.724600.com-网上买卖彩票犯法吗| www.822027.com-湖北快三遗漏表| www.882450.com-159彩票网丑闻| www.617558.com-7号彩票下载安装| www.123432.cc-体彩排三乐彩网| www.208817.com-老谢说彩的头条主页| www.286328.com-冮苏快三-| www.385802.com-负盈利彩票平台| www.061119.com-我附近的彩票站点| www.003005.cc-彩六ela全民| www.17489.com-3d红人玩彩| www.006945.com-立彩集团-| www.108063.com-足彩胜负彩开奖结果| www.089076.com-吉林快三投注平台| www.883214.com-快彩赚钱是真的吗| www.06215.com-福彩3d推荐条件| www.85591.cc-顶呱呱彩票-| www.072036.com-龙岗体彩店转让| www.866831.com-昨天彩票开什么| www.968997.com-8k彩票软件下载| www.aj96.com-手机上怎么买七星彩| www.8005.cm-时时彩一帆风顺规律| www.572941.com-时时彩三星杀号绝招| www.648268.com-新的彩网-| www.943826.com-703彩票安卓| www.992299.com-时时彩如何定四胆| www.kb9.com-十分快三开奖走势图| www.lt97.com-中彩网正版-| www.674515.cc-49l彩票com-| www.771531.com-澳门5分彩走势图| www.858329.com-500彩票信用玩法| www.932035.com-下载够力七星彩票| www.989427.com-917彩票app-| www.dd14.com-快三app安全| www.zd87.com-怎么开一个彩票网站| www.208027.com-49彩票cc-| www.291387.com-私彩黑平台-| www.319662.com-kc彩民福地登录| www.648158.com-香港行政快三投注| www.700618.com-球探彩票提现黑吗| www.4646.tv-买彩票连一个也不中| www.3589.xyz-昨晚七乐彩中奖号码| www.095261.com-玩彩人-| www.79jp.com-彩乐园计划平台| www.nz37.com-时时彩后二胆码技巧| www.158032.com-竞彩加奖app| www.573402.cc-彩票真实灵异故事| www.ef60.com-百胜彩票官网| www.117816.com-体彩开奖规则和奖金| www.307652.com-海南七星彩预测号码| 亚洲彩www.68568t.com| www.b60.in-假彩票机-| www.225540.com-厦门彩票托-| www.559007.com-11彩票app-| www.963428.com-婚姻彩礼新规定| www.ee64.com-体彩大乐透开奖直播| www.5346.vip-秋天风景彩铅画图片| www.745011.com-非法经营彩票判决| www.195019.com-彩票开奖结果3d| www.qp91.com-传统彩是真的吗| www.96758.cc-小崔网友提问彩票| www.109229.com-百彩网大全-| www.168360.com-快三快五啥意思| www.965.hk-七星彩的千位数在哪|