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>
<!-- general styles -->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
</style>

<link rel="stylesheet" href="style.css" type="text/css"/>


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>

<div id="container">
	<div id="featured">
	
		<div id="featured-info">
			<ul>
				<li>
					<h3><a href="portfolio-item.html">中央新影广告有限公司</a></h3>
					<p>中央新影广告有限公司是以独家代理运营卫视媒体广告资源为核心业务的综合性广告传媒公司，公司团队运营了宁夏卫视、新疆兵团卫视、新疆卫视、延边卫视等多家电视媒体广告资源，并曾与国内几十家电视媒体在节目制作、发行和大型活动方面有着密切合作。 </p>
					<p>公司拥有资深专家团队，覆盖传媒广告经营、品牌服务、大型活动策划、节目制作等多个领域。</p>
					<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
				</li>
			</ul>
		</div><!-- end of #featured-info -->
		
		<ul id="home-featured-nav">
			<li class="prev"><a href="#"><span>Previous</span></a></li>
			<li class="next"><a href="#"><span>Next</span></a></li>
		</ul>
		
		<div id="featured-images">
			<span class="glare"></span>
			<div id="images">
				<ul>
					<li><img src="images/home-dummy-featured-image.jpg" alt="" /></li>
				</ul>
			</div>
		</div><!-- end of #featured-images --> 
		
		<span class="clearfix"></span>
		
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	$('#featured-info').jCarouselLite({
	//slider for homepage featured section info textbtnPrev:'#home-featured-nav .prev',btnNext:'#home-featured-nav .next',easing:'easeInOutExpo',speed:900,vertical:true,visible:1}
);
	$('#images').jCarouselLite({
	//slider for homepage featured imagesbtnPrev:'#home-featured-nav .prev',btnNext:'#home-featured-nav .next',easing:'easeInOutExpo',speed:900,visible:1}
);
}
);
	//end of page functions

CSS代码(style.css):

/************************************************************************/
/******************* Portfolious StyleSheet *****************************/
/************************************************************************/
/*00. General Settings01. Headings & Colours02. Header03. Home Blog Posts Settings04. Content,Home Sidebar05. Footer06. General Sidebar07. Post General SettingsAdditional:Common Classes---------------------------------------------Author:Onur Oztaskiran - www.monofactor.com*/
/************************************************************************/
/************************************************************************/
/*** 00. General Settings ***/
/** ----------------------------------------------------- **/
body{font:82.5% "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial;/*** you can change background image here if you like**/
background:url(images/bg-office.jpg) #ebebeb no-repeat top center;}
body,html{height:100%}
a{cursor:pointer;}
/** Container Settings **/
#container{width:960px;padding:20px 5px;margin:0 auto;}
/*** 03. Home Featured Section ***/
#featured{padding-top:30px;color:#fff}
#featured-info,#home-featured-nav{float:left;}
#featured-images{float:right;}
#featured-info{width:455px;margin-top:72px;}
#featured-info p{margin:10px 0;}
#featured-info p strong{color:#d98f19;}
a#home-read-more-button{background:url(images/bt-home-readmore.png) no-repeat;width:103px;height:42px;margin-top:25px;display:block;text-indent:-9999px;}
/** featured images**/
#featured-images{width:440px;height:416px;background:url(images/computer.png) no-repeat top center;margin-right:-10px;position:relative;}
#images{margin:42px 0 0 50px;}
#images ul li{width:354px;height:214px;}
span.glare{background:url(images/computer-glare.png) no-repeat;display:block;position:absolute;right:25px;top:30px;width:219px;height:239px;z-index:9999;}
/** featured slider navigation **/
ul#home-featured-nav{background:url(images/bg-homeslider.png) no-repeat;width:33px;height:48px;margin-left:35px;margin-top:127px;padding-top:12px;}
ul#home-featured-nav li{margin-bottom:5px;}
ul#home-featured-nav a{width:16px;height:18px;display:block;text-indent:-9999px;margin:auto;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;}
ul#home-featured-nav a:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
ul#home-featured-nav li.next a{background:url(images/homeslider-arrow-down.png) no-repeat;margin-left:9px;}
ul#home-featured-nav li.prev a{background:url(images/homeslider-arrow-up.png) no-repeat;}

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