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.55162.cc-哪个网站送彩金| www.2858.biz-黑彩犯法吗-| www.31636.cc-彩票易彩快3| www.220297.com-金龙彩票app下载| www.660340.com-职业高频彩心态| 聚彩网www.707619.com| www.zk48.com-安徽快三辅助| www.oh24.com-皇彩票app-| www.9953.xyz-竞彩篮球胜分差技巧| www.948653.com-手机在哪买彩票| www.55908.com-l快三彩票-| www.303911.com-福建福彩3d走势图| www.416709.com-日本彩虹频道手机版| www.562234.com-江苏快三智能推荐号| www.666614.cc-七彩是骗局吗| www.793718.com-利民彩票网靠谱吗| www.894343.com-彩经网旧版本走势图| 万利www.32123b.com| www.67869.cc-重庆时时彩万能七码| www.610518.com-165彩票-| www.683506.com-义乌福利彩票| www.777846.com-易购彩平台提现失败| www.509.cm-黑彩破解器app| www.7353.wang-彩虹六号租号| www.36257.cc-福彩888预测3d| www.95289.com-七乐彩选号方法| www.313022.com-038彩票最新彩网| www.397284.com-昨晚福利彩票号码| www.504956.com-响排和彩排-| www.578292.com-澳门信誉彩票平台| www.654691.com-抚州彩-| www.730749.com-足彩胜负14场比分| www.804555.com-真人彩票源码| www.874899.com-彩宝彩票是真的吗| www.939569.com-福彩网址下载| www.987001.cc-幸运彩票极速赛车| www.at63.com-大同私彩平台信誉好| www.120347.com-彩迷张的双色球专栏| www.91oy.com-彩票如何避税| www.77340.cc-app买彩票犯法| www.87pq.com-海口七星彩论坛首页| www.2958.wang-福彩3d杀码图专区| www.8234.vip-广西快三和值| www.234093.com-安徽安徽快三一定牛| www.492369.com-网络彩票平台输钱| www.620069.com-易中彩票官网| www.29es.com-彩票弃奖新闻| www.549.date-兴盛彩票-| www.041353.com-彩票挂机骗局大全| www.706302.com-8彩客站微信| 5号彩www.585hc.com| www.22692.cc-分分彩永不输钱方案| www.018136.com-80彩票平台-| www.883404.com-pc高频彩票-| www.986405.com-彩票课堂-| www.jk2.com-江苏快彩助手| www.8gh.com-破解七星彩软件下载| www.370820.com-彩钢瓦漏水怎么办| www.025040.com-快速开奖彩票| www.808477.com-天玺彩票怎么样| www.963407.com-内蒙古快3预测彩乐| www.cai7866.com河北福彩快3| www.zn06.com-大发快三破解| www.968515.com-重庆时彩独胆公式| www.23tu.com-彩票图片编辑软件| www.556074.com-足球体育博彩app| www.861871.com-明星彩票app| www.486188.com-分分彩投注稳赚技巧| www.689056.com-专业玩彩网站| www.97828.cc-分分快三开奖规律| www.257807.com-uu快三软件下载| www.119342.com-兼职福彩是真的吗| www.280199.com-重庆时时彩走势分析| www.220799.com-彩神靠谱吗-| www.296644.com-e球彩奖金对照| www.377328.com-彩票乐园下载| www.209309.com-河北福彩排列五| www.308097.com-微信现在能买彩票吗| www.412909.com-澳门彩票官网下载| www.518812.com-女子中彩票51亿| www.521197.com-福星彩图库1| www.163257.com-快三跟团队很稳的| www.24683.cc-星空中的鲸鱼彩铅画| www.77693.com-彩票软件的制作| www.630725.com-彩票怎么玩才赚钱| www.730182.com-彩尊app打不开了| www.817243.com-玛雅吧玩彩票输死了| www.947938.com-购彩网平台怎么样| 天天彩票www.2373j.com| www.469588.com-竞彩足球是不是赌博| www.88yh.cc-热购彩票网址| www.802780.com-福彩总部电话号码| www.07058.com-香港十分彩官网| www.99hm.com-彩天地app下载| www.4589.vip-福彩今天买什么号好| www.910698.com-红旗彩票导师微信号| www.968283.com-彩票所有的号码全麦| 大赢家彩票平台www.278203.com| www.952311.com-南粤风采好彩1预测| www.ei19.com-一分快三算号神器| www.63hs.com-nba精彩时刻| www.114597.com-下载中国福利彩票网| www.391330.com-tt快三计划-| www.533861.com-七乐彩中奖按顺序吗| www.091928.com-谁有吉林快三预测群| www.717357.com-彩铅叠色规律| www.402.website赢彩网手机版下载| www.37484.com-购彩111骗局| www.921733.com-大发时时彩有人赢吗| www.898197.com-足彩今日欧冠分析| www.102300.com-北京快三平台下载| www.300036.cc-七天彩注册邀请码| www.500979.com-竟彩足球今日单关| www.ga6.cc-彩票九宫图-| www.9660.vip-万彩动画大师卡通| www.221048.com-彩票官方网站| www.8747.cn-安徽福彩快3基本走| www.98eh.com-乐彩网3b字谜专区| www.500238.com-最近体彩站-| www.028289.com-彩票验票码在哪查询| www.904248.com-快三分解教学口令| www.997024.com-海南福彩快2代理| www.13wh.com-3d老虎彩报-| www.q11.me-福彩快3哪些省有卖| www.006983.com-腾讯时时彩网页计划| www.967807.com-百合网上女的玩彩票| www.053.org-彩铅上色教程| www.390820.com-全彩漫画母系| www.107752.com-彩票能作弊吗| www.850406.com-足彩二串一玩法| www.978748.com-微信买彩票靠谱吗| www.6oh.com-中彩票了-| www.1951.com-99彩吧开奖结果| www.232937.com-青海西宁快三开奖号| 500彩票www.50054z.com| www.75qd.com-财政部批准网络购彩| www.36tx.com-周日竞彩足球赛果| www.62qt.com-快乐彩规则和奖金| www.747443.com-爱彩人彩票网手机版| www.845501.com-三四五福彩什么意思| www.911882.com-天天彩票集团| www.970995.com-腾讯一分彩开奖官方| 开心彩票www.126730.com| www.gn36.com-江苏快三开大小| www.n30.club-爱乐透彩票旧版本| www.57qg.com-福利彩票开试机号| www.204440.com-吉林省快三千五百期| www.314980.com-福彩彩票注销流程| www.389077.com-福彩3d专家排行| www.504556.com-排练和彩排-| www.579625.com-一彩票网易彩票| www.37zl.com-七星开奖彩结果下载| www.666172.com-新浪竞技彩票中心| www.761176.com-延边福彩中心地址| www.369315.com-第三方彩票数据接口| www.22728.cc-秒速时彩开奖官网| www.004449.com-三彩官方旗舰店京东| www.l65.cc-彩神争8有人赚钱吗| www.252225.com-江苏快三投注网站| www.195216.com-中国江苏福利彩快3| www.098361.com-gc彩票-| www.07up.com-彩铅日落风景画教程| www.66rr.com-彩票十大信誉平台| www.6711.com-重庆时时彩51期|