swiper仿華為云網(wǎng)站banner圖片輪播代碼

使用方法：

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="免費體驗專區(qū)">
				<img src="statics/images/events-icon6-active.png" alt="免費體驗專區(qū)">
			</i>
						<h2>免費體驗專區(qū)</h2>
						<p class="js-title" title="">熱門云產(chǎn)品0元試用</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon1.png" alt="特惠專區(qū)">
				<img src="statics/images/events-icon1-active.png" alt="特惠專區(qū)">
			</i>
						<h2>特惠專區(qū)</h2>
						<p class="js-title" title="">云服務(wù)器首購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="">精品應(yīng)用 一鍵獲取</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="">輕松上手華為云服務(wù)</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切換結(jié)束時也運行當前slide動畫
		}
	})
</script>