jquery圖文切換左右按鈕控制圖片和文字切換效果代碼



131 522 175



特效描述:圖文切換 左右按鈕控制 圖片切換效果 文字切換效果,

代碼結構

1. 引入CSS

<link charset="utf-8" rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代碼

<div class="content">
	<div class="drama-poster">
		<ul>
			<li class="show-poster-3">
				<a href="#" class="img"><img original="images/1.jpg" width="135" height="180" style="display: inline-block;" src="images/1.jpg" /></a>
				<a href="#" class="title">彼得·布魯克音樂話劇《情...</a>
				<span class="price">票價:¥60起</span>
				<span class="arrow"></span>
				<p><strong>劇情簡介:</strong><br />英國戲劇大師彼得·布魯克本人攜全新力作首次亮相中國。看大師如何在音樂、幽默和絕望中,將喜劇、戲劇、幻想與生活片段結合,讓人們看到自己與之似曾相識的生活。</p>
			</li>
			<li class="show-poster-3 current">
				<a href="#" class="img"><img original="images/2.jpg" width="135" height="180" style="display: inline-block;" src="images/2.jpg" /></a>
				<a href="#" class="title">經典默劇《安德魯與多莉尼...</a>
				<span class="price">票價:¥40起</span>
				<span class="arrow"></span>
				<p><strong>劇情簡介:</strong><br />前一秒是淚水,后一秒是歡笑。讓你哭,讓你笑,讓你感動,悲喜交集的動人體驗,橫掃歐美各大戲劇節,倍受好評的世界最熱戲劇作品。</p>
			</li>
			<li class="show-poster-3">
				<a href="#" class="img"><img original="images/3.jpg" width="135" height="180" style="display: inline-block;" src="images/3.jpg" /></a>
				<a href="#" class="title">田沁鑫戲劇作品 癲狂喜劇...</a>
				<span class="price">票價:¥20起</span>
				<span class="arrow"></span>
				<p><strong>劇情簡介:</strong><br />國話著名導演田沁鑫執導,改編自楊慶電影《夜·店》,九個靚麗演員載歌載舞熱力四射,數萬觀眾從頭笑到尾荷爾蒙賁張</p>
			</li>
			<li class="show-poster-3">
				<a href="#" class="img"><img original="images/4.jpg" width="135" height="180" style="display: inline-block;" src="images/4.jpg" /></a>
				<a href="#" class="title">賴聲川--北京保利劇院2...</a>
				<span class="price">票價:¥10起</span>
				<span class="arrow"></span>
				<p><strong>劇情簡介:</strong><br /> [相聲]系列是【表演工作坊】的招牌戲碼,【表坊】相聲迷遍布全世界,每四年一文件新相聲作品早已成為觀眾期待的盛事,這次睽違六年,推出以旅行為主題的《那一...</p>
			</li>
			<li class="show-poster-3">
				<a href="#" class="img"><img original="images/5.jpg" width="135" height="180" style="display: inline-block;" src="images/5.jpg" /></a>
				<a href="#" class="title">陳佩斯導演 經典喜劇《陽...</a>
				<span class="price">票價:¥50起</span>
				<span class="arrow"></span>
				<p><strong>劇情簡介:</strong><br />歷時八年,風靡全國四十多個省市,演出兩百余場,吸引二十余萬觀眾的《陽臺》,北京駐場第二輪演出再次火爆來襲!新生代接棒陳佩斯經典喜劇,繼續激情四 射,再y...</p>
			</li>
		</ul>
	</div>
	<ul class="drama-slide">
		<li class="prev"><a href="javascript:void(null)" title="上翻">上翻</a></li>
		<li class="next"><a href="javascript:void(null)" title="下翻">下翻</a></li>
	</ul>
</div>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子