jquery图文结合滚动切换效果js代码

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

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

以下是 jquery图文结合滚动切换效果js代码的示例演示效果:

当前平台(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=gb2312" />
<title>jqueryͼ�Ľ�Ϲ����л�Ч��</title>
<link href="css/tab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</head>
<body>
<div class="tab">
	<div class="tab_pic">
		<ul>
			<li><a href="#"><img src="images/1.jpg" width="225" height="283" /></a></li>
			<li><a href="#"><img src="images/2.jpg" width="225" height="283" /></a></li>
			<li><a href="#"><img src="images/3.jpg" width="225" height="283" /></a></li>
		</ul>
		<span class="tab_san"><img src="images/tab_san.png" width="17" height="34" /></span>
		<span class="btn_ct"><a class="next"></a><a class="prev"></a></span>
		<span class="btn_bg"></span>
	</div>
	<div class="tab_txt">
		<ul>
			<li>
				<h3>�����װ���������ʦ��������1</h3>
				<p><b>��ҵѧУ:</b>�Ĵ������ѧ<br /><b>������Ʒ:</b>���ȳǡ�������Ʒ���к����ǡ�ʥ·����ۡ������Ԫ��������ĳǡ��������ǡ���������԰����徰�������š������츮 </p>
				<p><b>��Ʒ��:</b>�ִ�����ŷ����԰���</p>
			</li>
			<li>
				<h3>�����װ���������ʦ��������2</h3>
				<p><b>��ҵѧУ:</b>�Ĵ������ѧ<br /><b>������Ʒ:</b>���ȳǡ�������Ʒ���к����ǡ�ʥ·����ۡ������Ԫ��������ĳǡ��������ǡ���������԰����徰�������š������츮 </p>
				<p><b>��Ʒ��:</b>�ִ�����ŷ����԰���</p>
			</li>
			<li>
				<h3>�����װ���������ʦ��������3</h3>
				<p><b>��ҵѧУ:</b>�Ĵ������ѧ<br /><b>������Ʒ:</b>���ȳǡ�������Ʒ���к����ǡ�ʥ·����ۡ������Ԫ��������ĳǡ��������ǡ���������԰����徰�������š������츮 </p>
				<p><b>��Ʒ��:</b>�ִ�����ŷ����԰���</p>
			</li>
		</ul>
	</div>
</div>
</body>
</html>

JS代码(tab.js):

$(function(){
	var total=$('.tab_pic ul li').length;
	$('.tab_pic ul li').eq(0).addClass('on');
	$('.tab_txt ul li').eq(0).addClass('on');
	$('.tab_pic ul').width(total*225);
	$('.tab_txt ul').width(total*413);
	$('.next').click(function(){
	var num=$('.tab_pic ul li').length;
	var index=$('.tab_pic ul li.on').index('.tab_pic ul li');
	var on=index+1<num?index+1:0;
	var pwidth=parseInt(on*225);
	var twidth=parseInt(on*413);
	$('.tab_pic ul li').eq(on).addClass('on').siblings().removeClass('on');
	$('.tab_pic ul').stop().animate({
	left:-pwidth}
,"slow");
	$('.tab_txt ul li').eq(on).addClass('on').siblings().removeClass('on');
	$('.tab_txt ul').stop().animate({
	left:-twidth}
,"slow");
}
);
	$('.prev').click(function(){
	var num=$('.tab_pic ul li').length;
	var index=$('.tab_pic ul li.on').index('.tab_pic ul li');
	var on=index==0?num-1:index-1;
	var pwidth=parseInt(on*225);
	var twidth=parseInt(on*413);
	$('.tab_pic ul li').eq(on).addClass('on').siblings().removeClass('on');
	$('.tab_pic ul').stop().animate({
	left:-pwidth}
,"slow");
	$('.tab_txt ul li').eq(on).addClass('on').siblings().removeClass('on');
	$('.tab_txt ul').stop().animate({
	left:-twidth}
,"slow");
}
);
}
)

CSS代码(tab.css):

@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";color:#666666;}
.clear{clear:both;}
/* tab */
.tab{width:638px;height:283px;overflow:hidden;margin:170px auto 0 auto;}
.tab .tab_pic ul{height:283px;width:999em;position:relative;}
.tab .tab_pic ul li{float:left;}
.tab .tab_pic ul li a{display:block;}
.tab_pic{float:left;width:225px;height:283px;overflow:hidden;position:relative;}
.tab_txt{float:right;width:413px;height:283px;overflow:hidden;position:relative;background:#faf9f9;}
.tab .tab_pic .prev,.tab .tab_pic .next{display:block;width:31px;height:31px;float:right;margin:0 0 0 1px;overflow:hidden;cursor:pointer;background:url(../images/tab_btn.png);}
.tab .tab_pic .next{background-position:31px 0px;}
.tab .tab_txt ul{position:relative;}
.tab .tab_txt ul li{width:393px;height:263px;padding:10px;float:left;}
.tab_san{display:block;width:17px;height:34px;position:absolute;top:29px;right:0;}
.btn_bg{width:225px;height:33px;display:block;position:absolute;left:0;bottom:0;z-index:1;background:#000;display:block;filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3;}
.btn_ct{width:225px;height:31px;padding:1px;display:block;position:absolute;left:0;bottom:0;z-index:2;}

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