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.uz44.com-极速时时彩破解数字| www.nh38.com-北京市福利彩票中心| www.757338.com-体彩82多少钱| www.222770.com-七乐彩奖金计算器| www.004112.com-福彩双色球几点关机| www.76je.com-彩票软件平台| www.841324.com-怎么拍彩票正面查询| www.ak08.com-七星彩最快开奖直播| www.675532.com-希望彩票app下载| www.r73.net-广西省福彩兑奖中心| www.61hf.com-精彩网页设计| www.931100.com-彩八仙计划网页版| www.rv78.com-福彩3d杀5跨方法| www.205212.com-七乐彩-| www.888215.com-顶尖彩票真的假的| www.512864.com-体育彩票网| www.63728.com-唯彩竞彩推荐下载| www.318657.com-奔腾彩票-| www.025696.com-分分彩规律-| www.263891.com-福彩3d牛材网| www.21wy.com-彩票可以提现到微信| www.31264.com-易彩票赚钱吗| www.034959.com-全民赢彩票软件下载| www.846422.com-讲彩票-| 大赢家彩票平台www.810716.com| www.j18.org-天天中彩票没法升级| www.91cq.com-pk彩线路导航| www.532671.com-彩票六加一开奖时间| www.954501.com-90年代彩票-| 彩吧www.956458.com| www.192048.com-甘肃时时彩开奖结果| www.tt54.com-哪里能网上购足彩| www.91487.com-绿好彩是爆珠烟吗| www.4918.cn-银海布忘图福彩3d| www.8994.cm-凤凰彩票fh168| www.330910.com-500彩票解码器| www.863575.com-彩票投注接口| www.946712.com-湖北省快三开将结果| 六福彩票www.66ffn.com| www.61xo.com-彩票软文素材| www.1211.net-彩票中2亿-| www.160094.com-利彩工具3d走势图| www.9258.cn-乐视彩票网站| www.6628.net-重庆时时彩独胆技巧| www.036757.com-快乐彩22667| www.y37.org-彩神称霸lll| www.684094.com-彩票杀号器-| www.794786.com-快三和值9多少注| www.9mu.com-亚彩99-| www.5353.in-怎样彩票-| www.57987.com-破解彩票概率组合| www.76453.com-博客彩-| www.393311.com-福利彩票奖池怎么算| www.31ub.com-彩民高手-| www.3603.cn-足球彩票一般多少钱| www.51475.cc-福彩6选3玩法| www.816568.com-快三多长时间开一次| www.mg00.com-快三两不同号技巧| www.796407.com-彩16app网址| www.3558.xyz-澳门网站领彩金大全| www.542801.cc-来彩官网-| www.4506.cc-体彩22期-| 大赢家彩票平台www.926013.com| 500彩票www.514377.com| www.765461.com-彩票反水怎么算| www.72291.cc-86彩票app下载| www.633757.com-虎都收购的悦心亿彩| www.755134.com-炫彩彩票软件| www.826320.com-穷人买彩票-| www.884897.com-彩神8真的假的| www.cai6000.com内蒙古快三开奖号| www.626504.com-紫微彩票占卜| www.255042.com-新时时彩助手下载| www.85268.com-688彩票网站首页| www.981239.com-凤凰彩票网址| www.81812.com-用概率算福利彩票| www.862326.com-福彩今天开奖结果| www.9949.pw-彩票图表趋势走势| www.ok77.com-中国福彩3d开奖号| www.032303.com-香港赛果及派彩| www.141877.com-时时彩杀大赔小| www.227111.cc-彩虹吉他谱-| www.8484.xyz-北京五分彩是什么| www.768651.com-北京爱乐彩-| www.75zy.com-福彩三d天罡八卦图| www.9995.hk-彩色印刷包装哪家好| www.86606.com-竞彩猫杜老师| www.158658.com-博友彩软件首页| www.336484.com-彩票提现多久到账| www.70094.com-彩8彩票骗局| www.265670.com-上海福利快三| www.36ee.com-中国福彩几个球中奖| www.1413.club-彩宝贝彩票专家预测| www.144354.com-买福利彩票怎么买法| www.696.top-购彩ill真假| www.a83.cc-977彩票软件下载| www.47er.com-福彩双色球购买软件| www.221062.com-快三和值跨度表| www.2358.me-彩票开奖提示图片| www.8301.vip-上饶市福彩中心在哪| www.344689.com-极速彩票开奖网站| www.574545.com-时时彩网站诈骗案| www.644463.com-数学家研究彩票| www.737744.com-快3追号福彩回扣| www.798386.com-极速时时彩五星计划| www.615829.com-福彩3d排列5| www.739942.com-内蒙福彩快三遗漏| www.838069.com-10086彩票-| www.915779.com-加盟福利彩的费用| www.972952.com-彩虹世界官网| PK彩票www.www.23040.com| www.846813.com-彩票事件视频| www.925694.com-深圳福彩快乐彩| www.986187.com-口袋足球竟彩| www.tk36.cc-中国体彩报最新| www.24024.cc-压彩票-| www.629793.com-256彩网-| www.55026.com-时时彩提前开奖作弊| www.354532.com-国外彩票中大奖号码| www.850825.com-大发时时彩能不能玩| E彩堂www.9818w.cc| www.715888.cc-体彩管理中心| www.3849.top-海南今天七星彩规律| www.1199.live-下截全民彩票软件| www.6688.site-体彩高效订票软件| www.917282.com-网易彩票走势图| www.cp436.com-极速快三能赚钱吗| www.mi06.com-好彩堂跑狗图| www.zs63.com-五分赛车彩票规则| www.20lg.com-福彩在线网站| www.250625.com-福彩手机购彩安全吗| www.318643.com-江西快三开奖时间| www.371861.com-体育彩票昨晚的号码| www.444785.com-呼和浩特彩票| www.399220.com-动物福彩开奖走势图| www.509703.com-利赢国际彩票合法吗| www.717145.com-彩铅怎么水溶| www.969006.com-酷彩吧网址-| www.20bx.com-开彩票店诀窍| www.99gj.com-明天快三有豹子吗| www.2394.cm-钟嘉欣好彩妹图片| www.019512.com-福彩彩吧助手| www.086057.com-足彩唯彩会姜山冷门| www.769093.com-体育彩票排五开奖| www.100338.com-乐彩3d下载-| www.421465.com-七星彩预测号众彩网| www.751937.com-ok彩票是谁的| www.cp3118.com-单机快三-| www.5268.link-好彩乐彩票-| www.13401.cc-金誉彩票网登录不上| www.160568.com-排列三走势乐彩网| www.836562.com-中原彩票快3骗局| www.nl36.com-足球体彩计算器| www.785342.com-金巴黎彩票合法| www.h81.club-779彩票官方网站| www.08ud.com-体彩3开奖结果| www.378049.com-肥乡抵制彩礼| www.462454.com-彩生活物业工资待遇| www.im69.com-移动彩票软件安全吗| www.093130.com-体育彩票高频彩种| www.147958.com-百胜快三推荐码| www.567869.com-体彩江苏ⅱ选5| www.858162.com-天下无敌彩报2合1| www.972220.com-19029期七星彩|