jquery左右按钮控制图文切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery左右按钮控制图文切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery左右按钮控制图文切换代码</title>
<link charset="utf-8" rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>                                                                       
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<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>
</body>
</html>

JS代码(script.js):

$(document).ready(function (){
	$(".drama-poster li").live("hover",function (){
	$(".current").removeClass("current");
	$(this).addClass("current")}
);
}
);
	$(function (){
	var a = $(".drama-poster ul>li");
	a.mouseover(function (){
	a.removeClass("current");
	$(this).addClass("current")}
);
	$(".drama-slide li.next a").click(function (){
	var b = $(".drama-poster ul>li:first"),c = $(".drama-poster ul .current").index();
	$(".drama-poster ul>li:last").after(b);
	$(".drama-poster ul li").removeClass("current");
	$(".drama-poster ul").find("li").eq(c).addClass("current")}
);
	$(".drama-slide li.prev a").click(function (){
	var c = $(".drama-poster ul>li:last"),b = $(".drama-poster ul .current").index();
	$(".drama-poster ul>li:first").before(c);
	$(".drama-poster ul li").removeClass("current");
	$(".drama-poster ul").find("li").eq(b).addClass("current")}
)}
);

CSS代码(style.css):

@charset "utf-8";*{padding:0;margin:0;list-style:none;border:none;}
body{font:normal 12px/normal Verdana,Geneva,sans-serif;}
a{color:#333;text-decoration:none;}
/* drama-poster */
.content{height:335px;width:600px;margin:40px auto 0 auto;position:relative;overflow:hidden;}
.drama-poster{margin:0 auto;width:447px;height:335px;overflow:hidden;position:relative}
.drama-poster ul{width:10000px}
.drama-poster li{padding:0 7px}
.show-poster-3{width:135px;float:left}
.show-poster-3 .img{display:block;width:135px;height:180px}
.show-poster-3 .title{display:none;width:105px;height:42px;background:url(../images/bg-index-img.png) 0 0 no-repeat;_background:url(../images/bg-index-img2.png) 0 0 no-repeat;position:absolute;color:#fff;padding:138px 15px 0 15px;line-height:1.5;top:0;}
.show-poster-3 .title:hover{color:#fff}
.drama-poster li.current .title{display:block}
.show-poster-3 .price{width:135px;height:20px;display:block;margin-top:10px;text-align:center;font-weight:bold;}
.show-poster-3 .arrow{display:none;position:absolute;bottom:107px;width:135px;height:7px;overflow:hidden;background:url(../images/bg-channel-drama.png) 50% -350px no-repeat}
.current .arrow{display:block}
.show-poster-3 p{display:none;color:#999;line-height:20px;position:absolute;width:447px;height:94px;left:0;bottom:2px;border-top:1px dashed #ccc;z-index:10px;padding-top:10px}
.show-poster-3 p strong{color:#333;font-weight:normal;text-align:center;}
.drama-poster li.current p{display:block}
.drama-slide li{position:absolute;top:93px}
.drama-slide li.prev{left:0}
.drama-slide li.next{right:0}
.drama-slide li a{display:block;width:13px;height:25px;background:url(../images/bg-slide.png) no-repeat;text-indent:-1000em}
.drama-slide li.prev a{background-position:0 -122px}
.drama-slide li.prev a:hover{background-position:0 -147px}
.drama-slide li.next a{background-position:-13px -122px}
.drama-slide li.next a:hover{background-position:-13px -147px}

附件:下载该文件资源,减少时间成本(增值服务)