QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 圖片代碼 > swiper響應式全屏banner圖片滾動輪播代碼

双色球后分布图: VIP商用 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天

知道了