jQuery OwlCarousel圖片滾動插件世界杯圖片輪播滾動代碼



125 498 167



特效描述:jQuery OwlCarousel 滾動插件 世界杯圖片 輪播滾動,jQuery OwlCarousel圖片滾動插件世界杯圖片輪播滾動

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>

3. HTML代碼

<!-- Demo -->
<div id="owl-demo" class="owl-carousel">
	<div class="itme">
		<ul>
			<li class="li1">
				<a href=""><img src="img/a1.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">阿根廷備戰 隊友倒地引梅西大笑</a></h3>
					<p>北京時間6月13日,阿根廷隊訓練備戰,眾將心情輕松,訓練中,隊友摔倒引梅西大笑。</p>
				</div>
			</li>
			<li class="li2">
				<a href=""><img src="img/b1.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">葡萄牙備戰 C羅情緒激動對隊友指手畫腳</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c1.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">魯尼投入訓練不敢怠慢</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c2.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">巴神備戰炫酷墨鏡拉風</a></h3>
				</div>
			</li>
		</ul>
	</div>
	<div class="itme">
		<ul>
			<li class="li1">
				<a href=""><img src="img/a2.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">荷蘭5-1血洗西班牙 羅本范佩西梅開二度</a></h3>
					<p>6月14日凌晨,西班牙隊迎戰荷蘭隊,荷蘭5-1逆轉獲勝。范佩西羅本梅開二度,德弗里頭球破門。</p>
				</div>
			</li>
			<li class="li2">
				<a href=""><img src="img/b2.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">西荷大戰 橙衣球迷"巨胸"造型搶鏡</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c3.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">哈維重演卡納瓦羅悲劇</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c4.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">科比觀西荷戰疑似爆粗</a></h3>
				</div>
			</li>
		</ul>
	</div>
	<div class="itme">
		<ul>
			<li class="li1">
				<a href=""><img src="img/a3.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">兩度獻唱世界杯的洛佩茲 身材驚呆小貝</a></h3>
					<p>1994年曾為美國世界杯獻聲,2014年以出位著裝現場演唱巴西世界杯主題曲。</p>
				</div>
			</li>
			<li class="li2">
				<a href=""><img src="img/b3.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">世界杯女主播太太團 斯內德妻子小三逆襲</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c5.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">英格蘭太太團聲名狼藉</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c6.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">本田德羅巴領銜型男PK</a></h3>
				</div>
			</li>
		</ul>
	</div>
	<div class="itme">
		<ul>
			<li class="li1">
				<a href=""><img src="img/a4.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">日本混血名模私房寫真助威藍武士</a></h3>
					<p>日本-加拿大混血名模maggy為《GQ》雜志拍攝私房寫真,愛好體育的她曾采訪過香川真司。</p>
				</div>
			</li>
			<li class="li2">
				<a href=""><img src="img/b4.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">比利時小姐舉行內衣足球賽 應景世界杯</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c7.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">GQ里約最性感海灘特輯</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c8.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">央五女主播扮足球寶貝</a></h3>
				</div>
			</li>
		</ul>
	</div>
	<div class="itme">
		<ul>
			<li class="li1">
				<a href=""><img src="img/a5.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">空姐變身足球寶貝 萬米高空造勢世界杯</a></h3>
					<p>中國云南某航空公司航班上,空姐穿著巴西隊服為旅客服務。</p>
				</div>
			</li>
			<li class="li2">
				<a href=""><img src="img/b5.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">孔卡美女翻譯與乳神合影 氣場絲毫不遜</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c9.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">泳裝美女大玩水上足球</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href=""><img src="img/c10.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="">TVB美女主播看臺搶鏡</a></h3>
				</div>
			</li>
		</ul>
	</div>
</div>
<!-- Demo end -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 二維碼 頭像上傳 圖片上傳 圖片全屏 圖片淡出淡進 圖片淡出 圖片淡進 圖片延遲加載 圖片延遲 圖片加載 圖片翻轉 圖片旋轉 圖片疊加 圖片層疊 圖片放大鏡 圖片拖動 圖片拖拽 圖片廣告 地圖 中國地圖 世界地圖 帶縮略圖的幻燈片 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滾動切換 滾動條切換 滑動選項卡 滑動切換 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 圖片滑動 圖片滑塊 圖片收縮展開 圖片收縮 圖片展開 圖片切換 圖片選項卡 圖標選項卡 圖片滾動 圖片滾動條 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 純圖片輪播 圖片輪播 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 圖表 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片 圖片插件 頭像截圖 帶標題的焦點圖 帶縮略圖的幻燈片 自動滾動圖片輪播 圖片文字滾動 文字圖片滾動 選項卡自動切換 圖片滾動 滾動圖片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子