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.961847.com-成都竞彩快三开奖| www.ag21.com-腾讯彩票开奖平台| www.wl36.com-手机彩膜-| www.14jp.com-百盈快三和直播吧| www.735.red-博盈彩票安全吗| www.4613.biz-一直买一注彩票| www.196846.com-马来西亚彩票规则| www.273338.com-支付宝停止彩票兑换| www.298930.com-肝素逸彩-| www.70105.com-彩票8官网-| www.044147.com-彩票自动挂机软件| www.239823.com-王者彩票app| www.359944.cc-买彩票顺口溜视频| www.52uh.com-信彩国际娱乐| www.505844.com-彩票事件杀人| www.979165.com-蓝好彩香烟价格| www.22wf.com-彩票兑奖时间是几点| www.3398.win-足球竞彩可以赚钱吗| www.572.hk-时时彩追豹子计划| www.5462.cm-福利彩票的利润| www.16493.com-福彩3d太假-| www.923650.com-彩票实体店-| www.450475.com-福彩开机号列表| www.603686.com-足彩数据软件| www.701866.com-陌陌彩票app下载| www.785682.com-xr原彩有什么用| www.878131.com-福彩3d全国最大奖| www.975042.com-彩票0-| www.ag30.cc-今晚全国彩票开奖| www.yj58.com-七乐彩3个号有奖| www.35aj.com-京彩e账户忘记密码| www.847.pw-乐游彩票正规吗| www.085740.com-彩票反水什么意思| www.xb38.com-海南七星彩特区论坛| www.334408.com-高频彩吧-| www.454708.com-分分彩高手怎样翻倍| www.563331.com-篮球博彩必发指数网| www.642125.com-彩票图形代表的数字| www.835131.com-欧盟好彩柠檬双爆珠| www.911327.com-民彩网安全吗| www.510470.com-送彩虹屁-| www.710890.com-87体彩app-| www.857750.cc-盈彩娱乐平台怎么样| www.f64.live-蓝海娱乐发达彩票| www.783369.com-3d福彩藏机图正板| www.220826.com-彩神app破解| www.375370.com-海南七星彩现| www.612338.com-马来分分彩是真的吗| www.793434.com-福彩3g试机号| www.949862.com-大彩网双色球走势图| www.ie67.com-不要买彩票-| www.32gh.com-环球彩票平台下载| www.190521.com-e球彩奖金参照表| www.108553.com-速盈彩官网app| www.215792.com-中国福利彩快三直播| www.317717.com-胜负彩技巧-| www.3300.org-彩宝贝开奖结果| www.26139.com-彩虹的形成视频| www.273187.com-福彩文化理念是什么| www.351626.com-彩票178走势| www.16840.cc-福彩3b字谜僵局| www.2127.shop-福彩折现图-| www.8561.org-旺彩开奖软件大全| www.w42.net-长春吉康彩溢还开吗| www.53gk.com-今天福利彩票布衣图| www.767.in-竞彩足球复式串关| www.930631.com-19037七星彩| www.983604.com-幸运时时彩软件下载| www.ja19.com-足彩竞彩网首页| www.b28.in-辉煌彩票官网下载| www.40ux.com-七星彩按顺序中奖吗| www.375.cm-手机彩票导航网址| www.067726.com-环彩网-| www.222621.com-十分快三计划软件| www.970913.com-迷彩兔是哪里的网站| www.679098.com-十分彩跟永9购| www.825698.com-北京快三历史查询| www.903518.com-500购彩下载地址| www.984661.com-彩虹8官网-| www.fm9.com-体彩7星彩玩法| www.81026.com-外围足球彩票网站| www.89828.com-日本有卖彩票的吗| www.311553.com-云南快三走势图| www.841148.com-拍一排查彩票| www.964459.com-足彩比分气新浪| www.cp4.com-快三线上投注| www.tw28.com-优彩网网址-| www.dj2.cc-玩快三有什么技巧| www.592638.com-中国福彩模拟投注| www.662251.com-体彩竞彩兑奖有效期| www.741565.com-730彩票软件| www.839262.com-河北快三号码表| www.921596.com-今日青海快三走势| www.981620.com-快三手机版下载| www.hi16.com-福彩字谜图-| www.099460.com-2018彩库宝典| www.657071.com-七星彩质合数走势图| www.750068.com-七星彩精准号码预测| www.zz39.cc-体彩店老板-| www.72289.cc-福彩一体机安装| www.064005.com-菠萝彩软件下载| www.615963.com-红金龙软红之彩| www.cp3596.com-时时彩幕后控制| www.984519.com-爱彩乐双色球遗漏| www.dw83.com-福彩网app可靠吗| www.b96.club-大发快三怎么看| www.65ti.com-福彩023期中奖号| www.082579.com-118彩票怎么回事| www.280332.com-广东快乐彩走势图| www.554872.com-本港彩票三肖六码| www.640518.com-k彩平台是黑台吗| www.870522.com-怎样注册中博彩票| www.981250.com-足彩14场开奖最快| www.dz90.com-重庆市彩时开奖结果| www.32ja.com-下载贵州多彩宝交费| www.12618.com-三宝生活体彩屋代理| www.52692.cc-好彩18036网址| www.04793.com-手机足彩-| www.211105.com-安徽快三网上投注| www.692365.com-新浪彩票比分直播| www.uu43.com-福彩5d走势-| www.872521.com-四川福彩网官方网站| www.942444.com-go彩注册-| www.989849.com-彩民乐和阳光探码图| www.bk44.com-大乐透杀号凤彩网网| www.161585.com-外围竞彩app| www.237046.com-足彩复式投注速算表| www.365189.cc-_红中彩票平台登录| www.545917.com-福彩投注站申请电话| www.84go.com-福利彩票亭-| www.20sl.com-彩票条码在哪| www.362026.com-中国彩吧105| www.433893.com-毕节中彩站-| www.515333.com-快三上家-| www.586499.com-彩金资料大全| www.654821.com-焕彩二代气垫bb霜| www.703505.com-青海福彩天地报纸| www.762605.com-香港彩富网综合资料| www.814844.com-河北盗金库买彩票| www.869853.com-彩票开奖哪里可以看| www.914769.com-黑彩可以报案吗| www.963181.com-体彩巅峰对决50元| 福利彩票www.8039h.com| www.2706.cn-牛蛙彩票36码网站| www.474178.com-众彩网大乐透迟丽颖| www.297283.com-时时彩票下载| www.585587.com-福彩三弟胆码预测| www.656279.com-大发彩票官方网址| www.718816.com-雨后彩虹象征什么| www.787819.com-彩客化学集团董事长| www.852808.com-168官方彩票| www.922389.com-深圳福利彩票店转让| www.39197.com-罗彩韫-| www.28fq.com-腾讯彩票娱乐有托| www.131889.com-滨州结婚彩礼价格表| www.446101.com-手机版彩票源码| www.79gp.com-福彩3d和值振幅| www.108638.com-新彩彩票下载安装| www.935613.com-深圳彩神-| www.392405.com-迪丽热巴彩铅画教程| www.317629.com-淘宝彩票下载手机版| www.399568.com-彩票分析新版| www.510628.com-www.彩票-| www.593061.com-哪些网络彩票平台好|