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天

知道了
58福彩 www.uh35.com-简单超好看的彩铅画| www.41167.com-人人彩票网是新骗局| www.082048.com-大发快三平台遍人吗| www.220989.com-手机贵宾中彩网| www.315021.com-彩控-| www.59168.cc-福彩三帝胆码| www.812615.com-福彩3d书籍排行榜| www.944497.com-佰萬彩票一分快| www.676278.com-快三倍投稳赚吗| www.340792.com-摘彩网牛材网| www.753062.com-3d走势彩经网| www.974393.com-昨天彩票开什么号码| www.ro7.com-彩票吸引话术| www.346464.com-彩神uv使用-| www.167511.com-江苏快三骗局曝光| www.579888.cc-进球彩app客服| www.728542.com-雪缘园足彩直播| www.951202.com-立彩赌博是什么东西| www.776138.com-福利彩票购买技巧| 大赢家彩票平台www.926013.com| www.198643.com-京彩app-| www.357297.com-a8彩票可靠吗| www.982044.com-排列五彩票对比器| www.nx65.com-彩票选号的奇怪方法| www.29tx.com-3d彩票第三-| www.9ny.com-彩客网进球彩开奖| www.1888.wang-香港中彩堂开特马| www.00410.com-彩票平台钱数能改不| www.756291.com-下载彩票大全| www.855619.com-快三经过的路线北京| www.944423.com-京彩彩票安全吗| www.996423.com-黑龙江体彩领奖地址| www.cg34.com-江苏快三正规平台| www.380388.com-我我要查彩票开奖| www.491081.com-10分彩网站-| www.575251.com-时时彩自己改单| www.96786.com-中国彩票那家靠谱| www.107370.com-必中彩票是正规的吗| www.84bu.com-体育彩票周几开奖| www.23335.cc-500彩票提现不了| www.9226.org-假的福彩网app| www.jd51.com-什么叫彩票信用玩法| www.496077.com-欢乐中彩票-| www.474816.com-105彩票红包有抢| www.569595.com-彩票打票员好学吗| www.644786.com-浙江体彩悦奖| www.91ln.com-福彩社区专家预测| www.880135.com-彩票领奖过程| www.971619.com-吉林快三提前看结果| www.cp4848.com-uu快三计划-| www.lm92.com-中彩网的网址| 500彩票网www.869455.com| www.365782.com-大众彩票手机客户端| www.753634.com-福彩三地图谜总汇| www.846892.com-福彩双色球七加一| www.882.pw-手绘日落彩铅画| www.29556.cc-175000乐彩网| www.097608.com-福彩公益金分配政策| www.196575.com-百宝彩河北快三| www.279795.com-三分时时彩计划| www.669764.com-海南私彩现状| www.zt16.com-竞彩网计算器胜负平| www.835306.com-墨西哥好彩香烟| www.975226.com-汇彩彩票-| www.le29.com-八亿彩app下载| www.10kv.com-x23彩膜-| www.49114.com-分分时时彩合法吗| www.051195.com-159竞彩足球下载| www.138502.com-时重庆时彩-| www.qy68.com-重庆时时彩最新规则| www.632830.com-体彩猜球规则| www.5359.cn-万豪彩票信得过吗| www.03md.com-彩裤宝典ios| www.862300.com-河南体彩电话号码| www.37556.cc-福彩三d跨度对照表| www.208263.com-吉林快三投注网站| www.99345.com-重新时时彩怎么推算| www.11hr.com-彩票站转让合同范本| www.2942.pw-体彩店五星网点| www.45948.com-澳客彩票网电脑板| www.245832.com-8k彩票骗局全过程| www.796791.com-网上买彩票在哪买| www.98875.com-快三高手求带| www.498855.com-彩票兼职赚十三| www.918122.com-飞艇是哪里的彩票| www.980988.com-七彩图片-| www.cp0034.com-快三论坛-| www.324207.com-乐彩网是正规网站吗| www.567446.com-福彩生肖时时彩| www.28913.cc-期期中彩票资讯| www.019389.com-毕节市福利彩票中心| www.891422.com-熊猫彩软件-| www.8pa.cc-手机软件彩票安全吗| www.967447.com-彩票群起名-| www.cai6784.com今日河北快三预测| www.6468.vip-体彩网络销售平台| www.08293.com-附近体彩站-| www.6165.vip-乐盈时时彩票| www.13016.cc-竞彩比分中国澳客网| www.665016.com-保定彩票兑奖中心| www.790725.com-内蒙古福彩3d加奖| www.49zw.cc-质量可靠的足球彩票| www.625389.com-快三外围有人控制吗| www.31451.com-刷彩票可靠吗| www.012392.com-凤彩网排列三字谜| www.1779.cc-mg游戏送彩金38| www.7525.biz-520彩金项链| www.290395.com-七星彩预测众彩网| www.874349.com-湖北体彩在哪里兑奖| www.355380.com-中国福彩5分快3| www.598535.com-七星彩2286期| www.704163.com-368彩票下载安装| www.803881.com-男彩票托的特征| www.904929.com-体彩足彩开奖| 博乐彩票www.35918w.com| www.in42.com-移动彩票是大平台吗| www.04dv.com-漳州体育彩票店转让| www.683065.com-燕赵福利彩票排列七| www.799023.com-永旺彩票网平台| www.874288.com-彩票平台刷流水任务| www.938386.com-非法体彩-| www.981193.com-彩虹冰淇淋视频| www.cp3433.com-河南彩色混凝土| www.789630.com-竞彩傻瓜规律| www.048567.com-赢钱彩票下载| www.343773.com-福彩3d杀跨高手| www.466379.com-e赢彩苹果下载| www.587662.com-c8cn彩吧-| www.970113.com-刮刮彩票-| www.jr20.com-乐和彩票客服电话| www.58qa.com-彩色混凝土地坪图片| www.2340.biz-彩票线上购买模式| www.58320.com-彩霸王2019资料| www.078089.com-国际经典快三| www.230086.com-彩下载app送彩金| www.340024.com-彩吧论天气网| www.521823.com-和彩云是什么| www.742001.com-好运来彩票真的吗| www.65133.cc-快乐10分彩票技巧| www.879541.com-网络彩票是不是假的| www.777881.com-旺彩网站-| www.10716.com-玛雅吧彩票游戏| www.607358.com-彩托怎么当-| www.0416.pro-福彩3d金码10期| www.28475.com-盐城开发区彩票中奖| www.019514.com-贵州体彩专家| www.041848.com-挪威彩票最高奖金| www.131750.com-彩票代理返点是什么| www.290453.com-3d彩经网杀号定胆| www.375591.com-7星彩论坛南国火爆| www.519816.com-五福821彩票下载| www.974613.com-众彩排三预测| www.588.org-足球胜负彩310| www.341516.com-彩票搞笑广告语| www.979701.com-荆州体彩店怎么开| www.cai2844.com内蒙古快三网站| www.ud41.com-彩川ひなのiv| www.315029.com-福利彩票大乐透玩法| www.607807.com-韩国彩票走势图解| www.674611.com-高频彩有多少输多少| www.421886.com-本期体彩双色球开奖| www.109736.com-体育彩票网点| www.81338.cc-今晚福彩3d试试号| www.060709.com-彩票报警-|