基于jQuery實現多屏幻燈片滾動切換特效



54 214 72



特效描述:基于jQuery實現 多屏幻燈片 滾動切換特效,基于jQuery實現多屏幻燈片滾動切換特效

代碼結構

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



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 帶縮略圖的幻燈片 圖片滾動 圖片滾動條 圖片切換 圖片選項卡 圖標選項卡 自動滾動圖片輪播 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子