QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > swiper仿阿里云官网导航图片切换代码

原创商用 swiper仿阿里云官网导航图片切换代码

swiper.js基于animate动画库制作阿里云官网顶部导航菜单和banner图片切换结合布局代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="top">
	<div class="bar">
		<div class="logo">
			<img src="statics/images/logo.png" />
		</div>
		<div class="bar_menu">
			<ul>
				<li>
					<a href="#"><i></i> 购物车</a>
				</li>
				<li>
					<a href="#">控制台</a>
				</li>
				<li>
					<a href="#">文档</a>
				</li>
				<li>
					<a href="#">备案</a>
				</li>
				<li>
					<a href="#">邮箱</a>
				</li>
				<li>
					<a href="#">登录</a>
				</li>
			</ul>
		</div>
		<div class="area">
			<span>中国站 <i></i></span>
			<ul>
				<li>
					<a href="#">
						<span class="nav-site">中国</span>
						<span class="nav-lang">简体中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">International</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">简体中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">???</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">Deutsch</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">Fran?ais</span>
					</a>
				</li>
				<li class="line"></li>
				<li>
					<a href="#">
						<span class="nav-site">Australia</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">Malaysia</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">Singapore</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">United States</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">中國香港</span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">中國台灣</span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>

				<li>
					<a href="#">
						<span class="nav-site">日本</span>
						<span class="nav-lang">日本語</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="search">
			<input type="text" name="keyword" placeholder="ECS" />
			<div class="search_icon"></div>
		</div>
	</div>
	<div class="nav">
		<ul>
			<li>
				<a href="#">最新活动</a>
			</li>
			<li>
				<a href="#">产品</a>
			</li>
			<li>
				<a href="#">解决方案</a>
				<div class="son">
					<div class="list">
						<h4 class="title">通用解决方案</h4>
						<p>
							<a href="#">网站</a>
						</p>
						<p>
							<a href="#">IPv6<i>NEW</i></a>
						</p>
						<p>
							<a href="#">企业互联网架构</a>
						</p>
						<p>
							<a href="#">网络<i>NEW</i></a>
						</p>
						<p>
							<a href="#">云存储</a>
						</p>
						<p>
							<a href="#">迁移</a>
						</p>
						<p>
							<a href="#">区块链<i>HOT</i></a>
						</p>
						<p>
							<a href="#">SAP 云</a>
						</p>
						<p>
							<a href="#">VMware 云<i>NEW</i></a>
						</p>
						<p>
							<a href="#">智能客服</a>
						</p>
						<p>
							<a href="#">AIOps故障管理</a>
						</p>
						<p>
							<a href="#">企业效能</a>
						</p>
						<p>
							<a href="#">容器服务深度学习</a>
						</p>
						<p>
							<a href="#">数据传输</a>
						</p>
						<p>
							<a href="#">数据库灾备</a>
						</p>
						<p>
							<a href="#">企业级分布式数据库<i>NEW</i></a>
						</p>
						<p>
							<a href="#">可信数字内容版权服务<i>NEW</i></a>
						</p>
						<p>
							<a href="#">移动研发平台</a>
						</p>
						<p>
							<a href="#">钉钉小程序</a>
						</p>
						<p>
							<a href="#">短视频</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">行业解决方案</h4>
						<p>
							<a href="#">新零售<i>HOT</i></a>
						</p>
						<p>
							<a href="#">新金融</a>
						</p>
						<p>
							<a href="#">新制造</a>
						</p>
						<p>
							<a href="#">新能源</a>
						</p>
						<p>
							<a href="#">新技术</a>
						</p>
						<p>
							<a href="#">智能工业</a>
						</p>
						<p>
							<a href="#">大游戏</a>
						</p>
						<p>
							<a href="#">大视频</a>
						</p>
						<p>
							<a href="#">大传媒</a>
						</p>
						<p>
							<a href="#">大健康</a>
						</p>
						<p>
							<a href="#">大政务<i>HOT</i></a>
						</p>
						<p>
							<a href="#">体育</a>
						</p>
						<p>
							<a href="#">交通物流</a>
						</p>
						<p>
							<a href="#">教育</a>
						</p>
						<p>
							<a href="#">房地产</a>
						</p>
						<p>
							<a href="#">汽车</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">安全解决方案</h4>
						<p>
							<a href="#">等保合规安全</a>
						</p>
						<p>
							<a href="#">新零售安全</a>
						</p>
						<p>
							<a href="#">政务云安全</a>
						</p>
						<p>
							<a href="#">互联网金融安全</a>
						</p>
						<p>
							<a href="#">游戏安全</a>
						</p>
						<p>
							<a href="#">社交/媒体spam</a>
						</p>
						<p>
							<a href="#">混合云态势感知</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">大数据解决方案</h4>
						<p>
							<a href="#">智慧场馆<i>NEW</i></a>
						</p>
						<p>
							<a href="#">智能设备搜索</a>
						</p>
						<p>
							<a href="#">大数据仓库</a>
						</p>
						<p>
							<a href="#">云上数据集成</a>
						</p>
						<p>
							<a href="#">台风路径分析</a>
						</p>
						<p>
							<a href="#">工业大数据服务</a>
						</p>
						<p>
							<a href="#">企业数据服务</a>
						</p>
						<p>
							<a href="#">智能旅游</a>
						</p>
						<p>
							<a href="#">手机数据</a>
						</p>
						<p>
							<a href="#">VR应用开发</a>
						</p>
					</div>
				</div>

			</li>
			<li>
				<a href="#">定价</a>
			</li>
			<li>
				<a href="#">ET大脑</a>
			</li>
			<li>
				<a href="#">数据智能</a>
			</li>
			<li>
				<a href="#">安全</a>
			</li>
			<li>
				<a href="#">云市场</a>
			</li>
			<li>
				<a href="#">支持与服务</a>
			</li>
			<li>
				<a href="#">合作伙伴</a>
			</li>
		</ul>
		<a class="register" href="#">免费注册</a>
	</div>
	<div class="banner">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide blue-slide" style="background: #3857AD;">
					<img src="statics/images/banner1.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<img src="statics/images/banner2.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>表格存储TableStore 升级发布会</h1>
						<p>更加灵活的查询能力与数据实时消费通道</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner3_bg.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>Cloud Toolkit 全新升级支持 RDS MySQL</h1>
						<p>插件自动化部署,大幅提升开发部署效率</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner4_bg.png" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>消息队列(MQ )全产品线升级</h1>
						<p>发布AMQP,兼容开源RabbitMQ,支持HTTP协议,推出7种多语言客户端</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner5_bg.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
	<div class="recommend">
		<ul>
			<li>
				<a href="#">
					<h2>云服务器特惠</h2>
					<p>限时5折,降低采购和运维成本,助力中小企业成长</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>Hi购季特权</h2>
					<p>“按月付款+包年折扣”两者兼得,两成首付轻松上云</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>阿里云 IoT</h2>
					<p>《智造将来》传递科技温暖,智能人居平台助力养老科技</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>DataWorks流计算平台</h2>
					<p>支持DAG与SQL模式互相转换,可视化拖拽开发实时计算</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>MongoDB游戏解决方案</h2>
					<p>完备的部署形态,适配多种游戏架构</p>
				</a>
			</li>
		</ul>
	</div>
</div>

<script>
	var mySwiper = new Swiper('.swiper-container', {
		loop: true,
		effect: 'fade',
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		autoplay: {
			delay: 5000, //1秒切换一次
		},
		on: {
			init: function() {
				swiperAnimateCache(this); //隐藏动画元素 
				this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件
			},
			slideChangeTransitionEnd: function() {
				swiperAnimate(this); //每个slide切换结束时运行当前slide动画
			}
		}
	});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了
亚洲28 www.960666.cc-彩票刷反水-| www.hw16.com-北京pk拾彩票平台| www.s55.com-彩吧今天试机号| www.64da.com-維彩视频-| www.1646.cn-福彩3d表格软件| www.20506.com-千万彩票怎么领彩金| www.71605.com-彩票app白菜| www.060075.com-快开彩qq群-| www.152433.com-福彩三d天天彩| www.255173.com-时时彩怎么买就稳赢| www.339561.com-福彩3d字谜汇总八| www.437318.com-快三012路怎么算| www.543099.com-河南快三app| www.671109.com-福彩3d怎么选胆| www.759707.com-湖北路快三遗漏| www.859433.com-体彩前三开奖号码| www.925080.com-穷人买彩票好吗| www.988611.com-必中彩票是个坑| www.hr2.com-11选5爱彩乐| www.rv74.com-中彩网双色球手机版| www.20vc.com-彩票选购-| www.500.com-利盈彩票群计划群| www.5118.com-买彩票截止到几点| www.12087.com-微彩吧兼职是骗局吗| www.61749.com-2快三计划软件| www.059411.com-福彩双色球规则介绍| www.153771.com-七星彩往期中奖查询| www.253501.com-玩快三输了很多钱| www.332761.com-京彩app哪里下载| www.418815.com-易旺彩票可靠吗| www.529716.com-双彩论坛体彩试机号| www.655354.com-彩票中奖公布| www.752996.com-赢赢彩推广号多少| www.836676.com-陕西体彩注册资金| www.904027.com-花式快三慢动作教学| www.968567.com-1分彩怎么才能赚钱| www.gv81.com-新彩票-| www.zz32.cc-上海开福彩店| www.33yr.com-摇摇乐彩票app| www.0880.xyz-彩票软件导航| www.8043.vip-大师水彩花卉图片| www.32629.com-福彩3网上投注| www.81040.com-福彩3d二码和差| www.036080.com-彩票梦想站合法吗| www.159433.com-众博彩票下载| www.253469.com-快三可以复式吗| www.530812.com-9彩腾讯分分| www.ka5.com-江苏福彩网官方网站| www.ys21.com-彩票坊用户注册| www.40su.com-9288彩票-| www.1451.pw-香港博彩堂免费精选| www.8832.date-福利彩票可以网投吗| www.49286.com-红旗彩票网址是多少| www.026211.com-网上黑彩平台哪个好| www.109046.com-欧赔与亚盘足彩研究| www.183579.com-甘肃快三遗漏号统计| www.261079.com-快三守号技巧| www.338828.com-彩票群拉人-| www.425567.com-彩票返水日结app| www.535998.com-彩票游戏不提现| www.750461.com-福彩宝-| www.822111.cc-703彩票官方网址| www.897773.com-网上买足彩合法吗| www.966710.com-福彩中奖返点| 幸运彩票www.807266.com| www.jo98.com-手机买彩票骗局| www.e48.club-hao彩票-| www.36jq.com-七星彩有试机号码| www.1378.mobi-九龙彩票是真的吗| www.8193.biz-七乐彩万能10码| www.31383.cc-快三比较稳的倍投法| www.76627.cc-陈赫买彩票中奖| www.028183.com-彩票代码是啥| www.105650.com-苹果时时彩下载| www.178606.com-足彩胜负14场| www.255090.com-天津时时彩开奖记录| www.334600.cc-博大彩票是不是真的| www.415879.com-体育彩票竞彩反点| www.521402.com-上饶市体彩中心地址| www.595142.com-四季发财彩票| www.670339.com-福利彩票3d太湖| www.751176.com-大发彩票站邀请码| www.813073.com-线上体彩安全吗| www.877745.com-河北彩票快三42| www.dj95.com-彩票计划app下载| www.vr63.com-彩迷葫芦弟-| www.10ty.com-四季彩平台登陆| www.80if.com-北控国彩是传销的吗| www.1818.name-关于时时彩被骗文章| www.9821.com-爱彩乐吉林-| www.58519.com-釉中彩的碗安全吗| www.024533.com-2019年福彩新规| www.099364.com-体彩360-| www.165286.com-安徽体彩兑奖地址| www.272171.com-博牛彩票合法么| www.360648.com-快三结束时间| www.446601.com-彩吧图库试机号| www.537959.com-新利彩票走势图大全| www.642236.com-黄渤的彩票-| www.731014.com-易彩彩票选号走势图| www.805607.com-彩铅画树木-| www.877231.com-七乐彩专家开机号| www.963796.com-手机上玩哪种彩票好| 500彩票www.52072l.com| www.fq75.com-彩神ll网页登录| www.wp37.com-彩要2元走势图| www.11hw.com-彩神计划可靠吗| www.76pr.com-买动物的彩票| www.1412.net-福利彩票双色球网址| www.09468.cc-下载105彩票| www.50138.com-彩票平台源码什么好| www.91501.com-好彩香烟哪里有得卖| www.044188.com-致富彩抢红包| www.155245.com-彩票足球竞彩怎么玩| www.237033.com-足球竞彩360| www.307028.com-时时彩快开-| www.369701.com-彩票最晚封盘的平台| www.458050.com-彩票就没有规律| www.541955.com-钻石彩票app| www.663777.com-有哪些靠谱的篮彩| www.733064.com-福彩七乐彩开奖公后| www.802229.com-竞彩总进球数研究| www.872836.com-遵义福彩兑奖在哪里| 大玩家彩票www.9478u.com| www.cr35.com-彩客网app-| www.st45.com-时时彩个位杀号宝典| www.18zl.com-彩票盘犯法吗| www.009324.com-彩票123安卓版下| www.135139.com-开体育彩票的店| www.212987.com-稳定的十大彩票网站| www.279816.com-三分时时彩-| www.898339.com-彩票代理怎么拉会员| www.966428.com-希腊10分彩结果| 彩世界www.99788f.com| www.fh88.com-手机怎样购彩票| www.m43.org-彩票湖北-| www.41au.com-足彩专家分析预测| www.1345.hk-苹果彩票靠谱吗| www.7466.pw-新加坡彩票开奖查询| www.21978.com-d58cc赢彩彩票| www.60127.com-彩票纳税多少| www.027643.com-体彩外围软件| www.095880.com-在哪里可以买彩票| www.155512.com-开什么彩票店最赚钱| www.257972.com-038彩票的账号| www.322383.com-竞彩8串28-| www.383628.com-大乐透走大彩| www.717945.com-彩票平台对刷| www.785597.com-中国体彩网官方篮球| www.852028.com-时时分分彩是假的吗| www.907296.com-网上彩票app下载| www.961489.com-广东福彩支票| www.999699.cc-搜索福彩图迷总汇| www.cp8011.com-广西快三遗漏| www.lo12.com-正规彩票平台推荐| www.d33.top-时时彩直播视频直播| www.24ms.com-钢化彩膜是什么| www.875.club-苹果机怎么下彩99| www.4555.xyz-今天福利彩票开奖吗| www.9361.cn-彩票官员米老鼠| www.53882.cc-时时彩任三混选| www.91251.com-好彩蓝莓双爆多少钱| www.036861.com-彩票榜软件下载| www.133316.com-彩钢板成都-|