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.257959.com-105彩票怎么下载| www.81786.com-吉林快三改20分钟| www.qk05.com-福彩好彩天地| www.96qa.com-博雅彩-| www.91874.com-好彩三八今期现生肖| www.320924.com-百宝彩tv-| www.2880.hk-玩网络黑彩犯法吗| www.126025.com-福彩手机报下载| www.254065.com-22彩票-| www.949756.com-广东福彩网上投注站| www.530912.com-时时彩最稳缩水| www.196252.com-福彩3d胆码定双胆| www.540751.com-彩票帮助赢软件| www.96915.cc-福彩3d微信怎么买| www.06hp.com-晨光48色彩铅色卡| www.064.cm-好运彩网站怎么样| www.im42.com-澳客彩票网-| www.69vi.com-至尊争霸彩票怎么样| www.07971.com-中彩那天讲课视频| www.90554.com-富赢彩票下载| www.64ef.com-彩王艾先生最后结局| www.56827.com-北京丹彩快三骗局| www.055658.com-那种彩票容易中奖| www.138177.com-北京时时彩计划网页| www.605251.com-可以网上购彩的国家| www.314.cc-众赢彩票团队李胜| www.699670.com-多彩网辽宁快乐12| www.459995.com-福彩3d固定断组| www.10md.com-福彩3d今天走势图| www.263205.com-重庆时时彩开奖视频| www.080928.com-福建31彩票走势图| www.236083.com-足球彩票推荐| www.6135.net-玩高频彩票如何赚钱| www.334447.com-专业高频彩计划网| www.335963.com-大乐透彩票指南报纸| www.qb64.com-南粤风采好彩3| www.644167.com-足彩串关表-| www.967.date-杏彩网页登陆网址| www.051809.com-大发时时彩正规吗| www.34sp.com-下载sk彩票app| www.898378.com-彩民乐树-| www.980774.com-福利彩票怎么样| www.du50.com-3d彩神吧-| www.617877.com-亿彩彩票安全吗| www.128179.com-彩票代理赚流水| www.21102.cc-彩票双色球复式买法| www.024999.cc-七星彩奖表最新| www.028900.com-三彩彩票网站入口| www.6476.cn-网上怎么开彩票网站| www.pn22.com-双色球福彩-| www.574115.com-专业带队彩票老师| www.099987.com-南方双彩票首页| www.222880.com-北京快三规律| www.926201.com-瑞彩祥云彩票可靠吗| www.995050.com-惠彩网是真的吗| www.jw12.com-彩铅零基础-| www.4ac.cc-男子贷款买彩票| www.76je.com-彩票软件平台| www.263762.com-优彩彩票手机版| www.365336.cc-体彩排列三和尾走势| www.861088.com-好彩26选2-| www.935708.com-彩票自动赚钱神器| www.994086.com-开户送68元彩| www.am69.cc-内蒙快三推荐号查询| www.qs83.com-江苏快三稳赢计划| www.1cs.cc-app盈彩网快3| www.65ag.com-微信彩票下载安装| www.0936.tv-跟单体彩-| 彩69www.022173.com| www.177.red-类似大地彩票平台| www.3870.cc-今日3d彩报第一版| www.389262.com-今天福彩奖号码| www.qf5.com-乐和彩彩票等待开奖| www.oq80.com-中彩彩票提现| www.791013.com-福彩福彩快3助手| www.870458.com-网上彩票店怎么开| www.892791.com-七乐彩缩水过滤软件| www.86416.com-买彩票发财不可能| www.688968.com-3d山东福彩沙龙| www.950247.com-3d福彩图迷字迷| www.122726.com-全民快三合法吗| www.232829.com-西宁快三走势图| www.325128.com-体彩排三图迷总汇| www.425858.com-青岛彩票-| www.523622.com-时时彩手机版| www.557040.com-水彩画星空-| www.692982.com-彩乐彩票平台登录| www.436063.com-梦大奖网海南彩民| www.707687.com-快三线上娱乐| www.814147.com-安徽快三网址| www.353771.com-体彩频道-| www.1789.cc-高频彩有假吗| www.21234.cc-竞彩篮球比分直播吧| www.3097.biz-彩票的走势怎么看| www.105621.com-今天的晚晚好彩图片| www.216148.com-七星彩出号公式| www.41iz.com-川渝竞彩联盟app| www.45cn.com-彩图诗句解特网址| www.rx62.com-安徽快三是违法的吗| www.19rt.com-得力彩票23993| www.30176.com-海南体彩手机客户端| www.140924.com-ct彩投彩票网| www.82227.com-长沙彩票开奖查询| www.592960.com-彩虹六号第4年季票| www.329828.com-快三群计划-| www.2004.in-体彩排列三活动| www.81fd.com-冮苏体彩十一选五| www.49gl.com-七彩语文杯书法比赛| www.29np.com-延吉体育彩票| www.087067.com-彩福下载-| www.984827.com-743好彩官方下载| www.oo47.com-3d新彩吧图-| www.678256.com-复兴彩票软件| www.669465.com-体彩排例三泰虎字谜| www.11sx.com-彩天下是不是骗局| www.314315.com-3d彩報-| www.399069.com-足彩通的钱-| www.877687.com-美国彩票代购| www.94qg.com-如何看七星彩走势图| www.274466.com-分分彩后二最牛算法| www.115416.com-七乐彩3l期-| www.638751.com-体育彩票站申请流程| www.258044.com-什么部门管皇都彩票| www.023443.com-彩票玩法种类| www.667245.com-佛弟子能买彩票吗| www.797083.com-博客彩登录-| www.878634.com-福少时时彩软件下载| www.tm01.cc-江苏福彩大乐透| www.114539.com-福彩双色球兑奖电话| www.005699.com-新浪彩票体育频道| www.827985.com-彩1彩票苹果| www.605066.com-qq七彩字体-| www.675001.com-彩票由哪个部门监管| www.184702.com-福彩快3走势图上海| www.309038.com-彩票平台大全| www.373098.com-福彩三分彩开奖结果| www.0367.wang-大地彩票手机版| www.674367.com-财政部关于体育彩票| www.746377.com-彩票免费预测大师| www.76956.com-9号彩票登录地址| www.11jz.com-河内5分彩计划预测| www.577091.com-8o234好彩网站| www.694168.com-体育彩票有人中奖吗| www.767908.com-旺彩字谜图-| www.906923.com-福利彩票刮刮奖品种| www.981368.com-福彩快三图-| www.bk2.com-彩神争8大发app| www.b51.net-重庆时时彩有官网| www.643968.com-四季彩app下载| www.734303.com-快三彩票是合法的吗| www.819986.com-蚂蚁会员积分换彩票| www.890579.com-岚科彩票网-| www.953646.com-如何在香港买彩票| 吉利彩票www.66376l.com| 500彩票www.911710.com| www.143546.com-计算彩票概率方法| www.50852.com-彩投彩票gt-| www.xg31.com-香港赛马会博彩公司| www.84999.cc-民政部彩票作假| www.558133.com-338彩票-| www.86080.com-彩涂钢板840| www.092214.com-kc一分彩-| www.78962.cc-999彩票投注网站| www.017834.com-四亿彩票申请彩金|