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.762419.com-竞彩哪里买-| www.9176.biz-七星彩四数万字表| www.94932.com-儿童彩妆安全| www.11999.cc-秒秒彩app-| www.026371.com-海南私彩平台| www.173041.com-江西福彩快三开奖| www.263579.com-彩票361注册| www.379585.com-尼彩手机n4-| www.555423.com-新快三遗漏360| www.643862.com-九万彩票可以提现嘛| www.780238.com-福利彩票申请| www.865723.com-御彩轩计划软件下载| www.943855.com-希望彩票官网平台| 黄金彩Ⅱwww.hjin1.com| www.mu85.com-体彩排列5走势图| www.34qt.com-3d彩票图库总汇| www.1357.cn-买彩票博彩算外财吗| www.aj92.com-彩票开奖公告立| www.z03.com-彩票无敌大数中特| www.76qt.com-足彩预测准的在哪里| www.2000.pro-足彩升盘升水| www.7500.wang-竞彩怎么申请| www.29276.cc-下载手机购彩票| www.099572.com-快三开挂器下载软件| www.253151.com-36选7好彩2复式| www.365776.cc-广东七乐彩开奖结果| www.456805.com-重时时彩五星定位胆| www.008038.com-七乐彩各期中奖号码| www.698437.com-彩库宝典官方版下载| www.808267.com-赢彩彩票不能买| www.904289.com-代理怎么拉人玩彩票| www.970334.com-qg刮刮彩-| www.cp3776.com-北京快三到几点| www.po07.com-竞彩500足球| www.270260.com-湖北快三预测豹子号| www.333435.cc-牛人算彩票-| www.fr70.com-福彩快三技巧视频| www.9637.net-国彩是什么项目| www.04sa.com-彩票案件梁山| www.99at.com-双色球诗迷彩宝贝| www.9404.loan-复试彩票中奖规则| www.cp6631.com-河南快三购买| www.51hx.cc-胜负彩500app| www.1166.win-彩票号码遗漏工具| www.229851.com-百盈快三开奖记录| www.304036.com-江苏快三赢钱技巧| www.370628.com-体彩4场进球对阵表| www.9981.tv-福彩3d组选走势| www.57368.com-澳客彩票是否靠谱| www.026221.com-福彩3d图迷慧总| www.110007.com-买彩票3d的方法| www.188653.com-快三屠龙和跟龙| www.271433.com-广东好彩中奖规则| www.ne57.com-乐优炫彩官网| www.78fu.cc-国外有胜负彩吗| www.589336.com-七星彩有多少个号码| www.700141.com-福少时时彩趋势软件| www.788748.com-唯彩看球cba直播| www.u69.me-博彩对澳门的影响| www.77qz.com-手机如何买足彩| www.9304.cn-马来西亚网上彩票| www.40549.com-中彩彩票qq群| www.87050.com-12580彩票-| www.538834.com-快三和值金表| www.3698.vip-赌时时彩输了好多钱| www.335680.com-彩票报纸电子版| www.413896.com-北京福彩3d研究院| www.530175.com-电视菜单怎么调彩| www.602419.com-梦想彩票骗-| www.667940.com-乐城彩票注册| www.733551.com-全民彩票平台下载| www.799114.com-彩票注册送彩金活动| www.869708.com-彩票账号被冻结| www.927850.com-惠民乐彩票怎么玩法| www.980173.com-竞彩足球数据接口| www.is9.com-彩票万能选号器| www.lx15.com-青海快三遗漏号| www.1409.net-亏损返利彩票平台| www.311918.com-甘肃彩票大奖| www.738001.com-快三没有规律吗| www.866840.com-福利彩票昨天开什么| www.974268.com-七乐彩4加1多少钱| www.81135.cc-快三走势图昨天呢| www.266805.com-江苏快三专业计划群| www.qe38.com-七彩娱乐彩票注册| www.86dk.com-中彩国际是合法的吗| www.836515.com-三地彩图-| www.913615.com-苏州于是足球e球彩| www.971841.com-创彩网违法吗| www.aj17.com-福彩林竹杀码今天| www.uy42.com-c23彩票登录| www.993088.com-网易彩票怎么赚钱| www.91766.com-今天好彩一-| www.097106.com-体彩啥时候开奖时间| www.183029.com-福彩安徽快三走势图| www.266468.com-快三秒图片-| www.057818.com-福彩3d第三版彩图| www.32773.com-彩礼和嫁妆返还比例| www.017.bid-福彩65期开奖| www.08505.com-巴西快三辅助| www.96971.com-中彩网大乐透推荐号| www.188759.com-快三开中两个有钱吗| www.486277.com-北京七星彩开奖| www.636795.com-儿歌彩虹-| www.753261.com-d9彩票cc-| www.850919.com-足彩复式怎么计算| www.927398.com-江苏体彩彩民论坛| www.998661.com-济宁福彩网七乐彩| www.ce73.com-大发快三总部在哪里| www.sf43.com-福彩三d多邦预测| www.19gm.com-查看更多精彩| www.94vu.com-500彩票怎么买| www.3005.cm-香港六和开奖记录彩| www.8403.com-高频彩前三组平天下| www.26926.com-七星彩有没有中奖| www.196920.com-福利彩票开奖结果i| www.266697.com-5oo彩网-| www.336306.com-皇都彩票是安全的吗| www.674446.com-79彩票登入平台| www.770605.com-彩46是正规网站吗| www.860554.com-福利彩票奖金二等奖| www.917797.com-彩虹代刷网装修代码| www.975894.com-河南许昌彩礼多少| 彩神网www.csw288.com| www.962243.com-福彩3d组选跨度表| 大赢家彩票网www.178719.com| www.210229.com-快三亏-| www.66kj.com-288彩票里的快三| www.3783.org-808福彩有问题吗| www.873341.com-中l国体育彩票| www.948113.cc-福利彩票的中奖规则| www.258449.com-足彩19046-| www.511936.com-幸运彩票体验金| www.183975.com-福彩3d今日预测号| www.275669.com-釉彩大瓶的化学成分| www.af53.com-昨晚彩票开什么号| www.zv73.com-星期六开奖的彩票| www.3396.cc-k73彩票app-| www.9511.loan-彩票今日运势查询| www.34580.com-中国彩吧首页论坛页| www.576778.com-彩票图片-| www.658885.com-中国彩票到底有多假| www.647767.com-陶宝买彩票-| www.733902.com-五百万彩网-| www.792004.com-一定牛彩票直接下载| www.879556.com-快三是福彩吗| www.973004.com-手机彩库宝典| www.cai10.cc-北京快三开奖| www.fi6.com-时时时彩开奖器| www.nz22.com-京彩集团江苏快3| www.00mk.com-七星彩十位百位定胆| www.021199.com-福彩3d老谢预测| www.082887.com-全民中彩票下载安装| www.166615.com-快三平台下载| www.3851.biz-匕7星彩开奖结果| www.088414.com-金利彩票官方| www.561958.com-双赢彩票安全可靠吗| www.vr95.com-快三一注多少钱| www.612583.com-uc彩票网22-| www.700393.com-网上在哪里买彩票| www.785013.com-乐优彩票ios| www.854711.com-竞彩篮球一场比赛| www.856707.com-辽福彩十二选五| www.397868.com-源码时时彩-|