jQuery内容滑块特效代码

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

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

以下是 jQuery内容滑块特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>jQuery内容滑块特效</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.js"></script>
<script type="text/javascript" src="js/lanrenzhijia.js"></script>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<div id="hero-slider">
		<ul>
			<li><a href="#" rel="#panel-1" class="active" id="01">Item 1</a></li>
			<li><a href="#" rel="#panel-2" id="02">Item 2</a></li>
			<li><a href="#" rel="#panel-3" id="03">Item 3</a></li>
		</ul>
		<div class="mask">
			<div class="slider-body">
				<div class="panel" id="panel-1">
					<h2>Lorem Ipsum Sit Dolor</h2>
					<p>Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. In condimentum orci id nisl volutpat bibendum. </p>
				</div>
				<div class="panel" id="panel-2">
					<h2>Lorem Ipsum Sit Dolor</h2>
					<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. </p>
				</div>
				<div class="panel" id="panel-3">
					<h2>Lorem Ipsum Sit Dolor</h2>
					<p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
				</div>
			</div>
		</div> <!-- .mask -->
		<div class="clear"></div>
	</div> <!-- #hero-slider -->
</body>
</html>

JS代码(lanrenzhijia.js):

$(document).ready(function (){
	$('#hero-slider ul a').click(function (){
	//reset all the items$('.customBlock ul a').removeClass('active');
	//set current item as active$(this).addClass('active');
	//scroll it to the right position$('.mask').scrollTo($(this).attr('rel'),300);
	//disable click event return false;
}
);
	$('#01').click(function (){
	$(this).addClass('active');
	$('#02').removeClass('active');
	$('#03').removeClass('active');
}
);
	$('#02').click(function (){
	$(this).addClass('active');
	$('#01').removeClass('active');
	$('#03').removeClass('active');
}
);
	$('#03').click(function (){
	$(this).addClass('active');
	$('#02').removeClass('active');
	$('#01').removeClass('active');
}
);
}
);

CSS代码(lanrenzhijia.css):

@charset "utf-8";#hero-slider{text-align:left;background-color:#efefef;border:1px solid #ccc;width:450px;-moz-border-radius:10px;-webkit-border-radius:10px;margin:0 auto;font-family:arial;}
#hero-slider .mask{float:left;width:300px;height:280px;margin:15px 0 0 10px;overflow:hidden;}
#hero-slider .panel{width:300px;height:280px;text-align:left;}
#hero-slider ul{margin:0;padding:15px 15px 0 15px;list-style:none;float:left;border-right:1px solid #dedede;height:285px;}
#hero-slider ul li{margin:10px 0;}
#hero-slider ul a{outline:none;text-decoration:underline;display:block;width:75px;height:74px;text-indent:-999em;}
#hero-slider a{background:url(../images/button.png) no-repeat 0 0;}
#hero-slider ul a.active{background-position:-75px;}
.panel h2{padding:15px 0 0 0;color:#0058a9;}
.panel p{color:#666;}
.clear{clear:both}

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