jquery图文切换左右按钮控制图片和文字切换效果代码



126 501 168



特效描述:图文切换 左右按钮控制 图片切换效果 文字切换效果,

代码结构

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

加群请备注:从官网了解到