QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper仿华为云官网banner图片轮播代码

原创商用 swiper仿华为云官网banner图片轮播代码

jQuery基于swiper制作华为云官网大气响应式的banner图片幻灯片轮播切换和产品列表布局代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" href="statics/css/swiper.css" />
<link rel="stylesheet" href="statics/css/animate.min.css" />
<link rel="stylesheet" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.10.1.min.js"></script>
<script src="statics/js/swiper.min.js"></script>
<script src="statics/js/swiper.animate1.0.2.min.js"></script>

3、body引入HTML代码

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide slide1">
		</div>
		<div class="swiper-slide slide2">
			<div class="inner">
				<img src="statics/images/words2.png" class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
		<div class="swiper-slide slide3">
		</div>
		<div class="swiper-slide slide4">
			<div class="inner">
				<div class="banner-text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
					<h3><em>[ 限时免费 ]</em></h3>
					<h2>专属云<em>0元试用</em></h2>
					<p>专家团1V1量身定制,打造您的云上专属头等舱</p>
					<span class="btn-primary" href="javascript:">免费申请</span>
				</div>
				<img src="statics/images/image-main4-r.png" / class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
				<img src="statics/images/image-sub4-r2.png" / class="ani img2" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
		<div class="swiper-slide slide5">
			<div class="inner">
				<div class="banner-text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
					<h3><em>[ 限时免费 ]</em></h3>
					<h2>专属云<em>0元试用</em></h2>
					<p>专家团1V1量身定制,打造您的云上专属头等舱</p>
					<span class="btn-primary" href="javascript:">免费申请</span>
				</div>
				<img src="statics/images/image-main5-r.png" / class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
				<img src="statics/images/image-sub5-r2.png" / class="ani img2" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
	</div>
	<div class="pagination"></div>
	<div class="cover"></div>

	<div class="home-events">
		<div class="home-events-box" style="min-height:30px;">

			<div class="home-events-box-wrapper" style="min-height:30px;">

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon6.png" alt="免费体验专区">
				<img src="statics/images/events-icon6-active.png" alt="免费体验专区">
			</i>
						<h2>免费体验专区</h2>
						<p class="js-title" title="">热门云产品0元试用</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon1.png" alt="特惠专区">
				<img src="statics/images/events-icon1-active.png" alt="特惠专区">
			</i>
						<h2>特惠专区</h2>
						<p class="js-title" title="">云服务器首购5折</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon2.png" alt="严选商城">
				<img src="statics/images/events-icon2-active.png" alt="严选商城">
			</i>
						<h2>严选商城</h2>
						<p class="js-title" title="">精品应用 一键获取</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon9.png" alt="5分钟快速入门">
				<img src="statics/images/events-icon9-active.png" alt="5分钟快速入门">
			</i>
						<h2>5分钟快速入门</h2>
						<p class="js-title" title="">轻松上手华为云服务</p>
					</a>
				</div>

			</div>

		</div>
	</div>

</div>


<script>
	var mySwiper = new Swiper('.swiper-container', {
		pagination: '.pagination',
		paginationClickable: true,
		autoplay: 5000,
		speed: 1,
		loop:true,

		onInit: function(swiper) { 
			swiperAnimateCache(swiper); //隐藏动画元素 
			swiperAnimate(swiper); //初始化完成开始动画
		},
		onSlideChangeEnd: function(swiper) {
			swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		}
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
澳门足彩 www.250773.com-全中彩票下载安装| www.469048.com-重庆时时彩第二十五| www.675623.com-彩票33期开奖结果| www.846155.com-彩票神人王成周采访| www.975338.com-网上博彩黑平台套路| www.kj75.cc-易彩快3开奖结果| www.33md.cc-福彩3d百位全杀法| www.2966.in-众盈彩票客户端下载| www.48586.com-重庆时时彩v| www.365322.com-中国福利彩票代玩| www.553856.com-胡家乐福彩助学| www.718338.com-彩典宝库app| www.893510.com-河北快三和值大小| 快彩www.81678p.com| www.138155.com-人人快三网址| www.297203.com-彩票停卖-| www.659962.com-名人彩票娱乐登录| www.779122.com-福彩3d定位杀号| www.905093.com-福彩快三代理挣钱吗| www.qn73.com-福彩快3几点开始| www.97jk.com-彩排意思是什么| www.69vm.com-4scc彩票网站| www.1993.vip-亿彩平台娱乐| www.8181.tv-圆梦七星彩论坛| www.31725.cc-必发盈亏和竞彩盈亏| www.93356.cc-中国体彩七星彩开奖| www.087388.com-3d彩吧首页-| www.273588.com-湖南于海彩票事件| www.383709.com-彩票开奖查询扫一扫| www.538658.com-多多彩彩票是骗局吗| www.623032.com-财神8彩票网正规吗| www.710517.com-竞彩操盘手招聘| www.821398.com-福彩彩乐乐-| www.914929.com-鸿运彩票下载安装| www.78ju.com-香港官网彩票| www.8199.space-福彩3八卦图| www.62283.cc-体彩大赢家足彩竞猜| www.096879.com-体彩的规则-| www.234638.com-幸运快三app| www.375515.com-体彩高频任三| www.577014.com-河南福利彩票幸运一| www.698080.com-杭州体彩兑奖地址| www.835577.com-广东彩票中心| www.8108.pw-728彩票注册| www.66872.cc-怎么看彩票码中奖| www.166065.com-快三走势图怎么判断| www.269730.com-皇帝彩票app| www.351588.com-体彩最大数字到多少| www.431392.com-葡京彩票登录网址| www.531313.com-香港创富彩库| www.609074.com-万优彩票链接| www.690157.com-竞彩足球魔方| www.773791.com-体育彩票的官网地址| www.853224.com-浙江体彩中心官网| www.915368.com-淘彩app官方下载| www.978292.com-彩钢围挡板设备厂家| www.cp3969.com-福彩内蒙快3走势图| www.1036.vip-我爱彩乐-| www.6269.xyz-逆袭分分彩做号工具| www.266854.com-体彩开奖结果走势图| www.494352.com-新浪竞彩足球胜负彩| www.672526.com-福州体彩购买点| www.801818.com-福彩3d怎么算| www.62543.com-彩票中奖图片愚人节| www.hu57.com-吉林福彩快三今天| www.1123.in-成都竞彩店-| www.001177.cc-福彩旗下的高频彩| www.199591.com-彩票开奖网-| www.346718.com-彩神快3是不是个坑| www.509904.com-500万彩票app| www.539128.com-时时彩高奖金平台| www.961847.com-成都竞彩快三开奖| www.dx57.com-幸运快三骗局| www.10.org-体彩226断组| www.675.cc-福彩做鬼-| www.17071.com-彩票通资讯完整版| www.110681.com-彩票99官方下载| www.89647.com-盛兴开奖彩票| www.252085.com-中彩网恢复买彩票了| www.433335.com-彩二-| www.114445.cc-彩皇网论坛-| www.md76.com-江苏快三杀号定胆| www.181455.com-安徽快三坐标走势图| www.395990.com-彩虹合唱团歌曲| www.518938.com-百威英博彩票| www.626057.com-玩3d彩票能赚钱么| www.cai2133.com如何玩好快三| www.tt22.cc-网上刷彩票-| www.05616.com-5000彩票网站| www.218995.com-福彩快三总代理| www.870002.com-约彩彩票-| www.5900.cm-怀化市福彩兑奖地址| www.660729.com-时时分分彩开奖号码| www.569137.com-甘肃快三两码遗漏表| www.488249.com-家彩网三d杀码| www.880504.com-十分彩平台违法吗| www.mf1.cc-360新快三-| www.04zk.com-校园一角彩铅画| www.2495.pw-东盛彩报3d综合| www.63362.cc-大公鸡七星彩解梦| www.100952.com-山东彩票齐鲁风采| www.154168.com-中国足彩馆原创视频| www.633515.com-幸运彩神排列三专栏| www.3450.vip-存1元送彩金平台| www.192014.com-江苏快三的走势图| www.321333.com-名人娱乐分分彩| www.808501.com-怎么看胜负彩销量| www.948492.com-彩仙骗局-| www.2299.pw-二四六天好彩手机版| www.483339.com-武汉七波彩-| www.6178.in-快三专业版-| www.562708.com-中国合法高频彩| www.699929.cc-彩票领奖遇到刁难| www.750464.com-大十字体育彩票网点| www.17396.com-彩票店微信公众号| www.756228.com-中国体育彩票时时彩| www.15825.com-华夏金融彩票| www.93140.com-福利彩如何才算中奖| www.369045.com-崇左开码结果开奖彩| www.vl14.com-江苏福彩快三口诀| www.111286.com-盈盈彩票手机版| www.111880.com-快三和值技巧教程| www.231298.com-福彩快三倍投计算器| www.512823.com-乐彩彩票是合法的吗| www.944212.com-88彩票官网站| www.je69.com-甘肃快三奖金对照表| www.5406.xyz-彩铅画简单好看图案| www.28je.com-重庆时时彩追号高手| www.8570.loan-阳光福彩今晚开奖| www.023681.com-彩票预测与查询| www.611551.com-家彩网胆码预测独胆| www.946912.com-中彩网北京pk10| www.f30.club-彩球闯关游戏| www.128474.com-好运彩快3-| www.296261.com-安徽快三数据遗漏| www.72.win-永安彩票-| www.854457.com-58酷彩网-| www.0907.xyz-私彩导航入口| www.369495.com-码雅彩票-| www.524203.com-福彩十二生肖数字| www.cai628.cc-彩票计划群骗局| www.l44.top-彩票二元网走势图带| www.876911.com-一分快三提前开奖网| www.we10.com-甘肃省体彩中心电话| www.15iu.com-网易足彩预测分析| www.612699.com-陕西宝马彩票案刘亮| www.98884.cc-彩票限制投注| www.233414.com-彩乐汇是不是假的| www.367908.com-刚力彩芽新剧| www.581032.com-如何买足彩划算| www.dv69.com-易彩彩票软件| www.4st.cc-贵州在哪兑福利彩票| www.262206.com-富民彩票app| www.628630.com-248彩票会员中心| www.951890.com-福彩快三过年放假吗| www.06966.cc-福彩的可怕黑幕| www.567811.com-彩票有四位数的吗| www.634332.com-七彩衣坊-| www.822529.com-3218彩城彩票网| www.5946.cc-约彩365客服电话| www.094822.com-福利彩票在线竞彩| www.844987.com-福利彩票投注简介| www.969160.com-彩53官网-| www.qg54.com-好彩柠檬爆珠|