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>
<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>

<script type="text/javascript" src="js/jQuery.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css"> 

</head>
<body>
<div>
<div class="slider_box" id="slider_name"> 
	
	<div class="mask"></div>
		 
	<ul class="silder_con">	
		<li class="silder_panel"><a href="" class="f_l"><img src="images/1.jpg" width="1024" height="375" /></a></li>
		<li class="silder_panel"><a href="" class="f_l"><img src="images/2.jpg" width="1024" height="375" /></a></li>
		<li class="silder_panel"><a href="" class="f_l"><img src="images/3.jpg" width="1024" height="375" /></a></li>
		<li class="silder_panel"><a href="" class="f_l"><img src="images/4.jpg" width="1024" height="375" /></a></li>
		<li class="silder_panel"><a href="" class="f_l"><img src="images/5.jpg" width="1024" height="375" /></a></li>	 
	</ul>
	
	<div class="silder_intro">
		<h3>味道江显武（私房菜）1</h3>
		<div>
			<p>黑椒鸡排牛肉</p>
			<p>特点：牛肉含有丰富的蛋白质和脂肪，其氨基酸组成接近于人体需要</p>
			<p>口感：辣感十足，肉味鲜美，饶有嚼头，美味无处不在。</p>
		</div>
	</div>
	<div class="silder_intro">
		<h3>味道江显武（私房菜）2</h3>
		<div>
			<p>黑椒鸡排牛肉</p>
			<p>特点：牛肉含有丰富的蛋白质和脂肪，其氨基酸组成接近于人体需要</p>
			<p>口感：辣感十足，肉味鲜美，饶有嚼头，美味无处不在。</p>
		</div>
	</div>
	<div class="silder_intro">
		<h3>味道江显武（私房菜）3</h3>
		<div>
			<p>黑椒鸡排牛肉</p>
			<p>特点：牛肉含有丰富的蛋白质和脂肪，其氨基酸组成接近于人体需要</p>
			<p>口感：辣感十足，肉味鲜美，饶有嚼头，美味无处不在。</p>
		</div>
	</div>
	<div class="silder_intro">
		<h3>味道江显武（私房菜）4</h3>
		<div>
			<p>黑椒鸡排牛肉</p>
			<p>特点：牛肉含有丰富的蛋白质和脂肪，其氨基酸组成接近于人体需要</p>
			<p>口感：辣感十足，肉味鲜美，饶有嚼头，美味无处不在。</p>
		</div>
	</div>
	<div class="silder_intro">
		<h3>味道江显武（私房菜）5</h3>
		<div>
			<p>黑椒鸡排牛肉</p>
			<p>特点：牛肉含有丰富的蛋白质和脂肪，其氨基酸组成接近于人体需要</p>
			<p>口感：辣感十足，肉味鲜美，饶有嚼头，美味无处不在。</p>
		</div>
	</div>
	
	<ul class="silder_nav dec">     
		<li><a href=""><img src="images/s-01.jpg" width="112" height="48" /></a></li>    
		<li><a href=""><img src="images/s-02.jpg" width="112" height="48" /></a></li>    
		<li><a href=""><img src="images/s-03.jpg" width="112" height="48" /></a></li>    
		<li><a href=""><img src="images/s-04.jpg" width="112" height="48" /></a></li>    
		<li><a href=""><img src="images/s-05.jpg" width="112" height="48" /></a></li> 		   
	</ul>
</div>
<script src="js/jquery.slides.js" type="text/javascript"></script>
</div>
</body>
</html>

JS代码(jquery.slides.js):

$(function(){
	var sWidth = $("#slider_name").width();
	var len = $("#slider_name .silder_panel").length;
	var index = 0;
	var picTimer;
	var btn = "<a class='prev'>Prev</a><a class='next'>Next</a>";
	$("#slider_name").append(btn);
	$("#slider_name .silder_nav li").css({
	"opacity":"0.6","filter":"alpha(opacity=60)"}
).mouseenter(function(){
	index = $("#slider_name .silder_nav li").index(this);
	showPics(index);
}
).eq(0).trigger("mouseenter");
	$("#slider_name .prev,#slider_name .next").css({
	"opacity":"0.2","filter":"alpha(opacity=20)"}
).hover(function(){
	$(this).stop(true,false).animate({
	"opacity":"0.6","filter":"alpha(opacity=60)"}
,300);
}
,function(){
	$(this).stop(true,false).animate({
	"opacity":"0.2","filter":"alpha(opacity=20)"}
,300);
}
);
	// Prev$("#slider_name .prev").click(function(){
	index -= 1;
	if(index == -1){
	index = len - 1;
}
showPics(index);
}
);
	// Next$("#slider_name .next").click(function(){
	index += 1;
	if(index == len){
	index = 0;
}
showPics(index);
}
);
	//$("#slider_name .silder_con").css("width",sWidth * (len));
	// mouse$("#slider_name").hover(function(){
	clearInterval(picTimer);
}
,function(){
	picTimer = setInterval(function(){
	showPics(index);
	index++;
	if(index == len){
	index = 0;
}
}
,3000);
}
).trigger("mouseleave");
	// showPicsfunction showPics(index){
	var nowLeft = -index*sWidth;
	$("#slider_name .silder_con").stop(true,false).animate({
	"left":nowLeft}
,300);
	$("#slider_name .silder_nav li").removeClass("current").eq(index).addClass("current");
	$("#slider_name .silder_nav li").stop(true,false).animate({
	"opacity":"0.5"}
,300).eq(index).stop(true,false).animate({
	"opacity":"1"}
,300);
	$("#slider_name .silder_intro").stop(true,false).animate({
	"opacity":"0"}
,300).eq(index).stop(true,false).animate({
	"opacity":"1"}
,300);
}
}
);

CSS代码(slider.css):

@charset "utf-8";/*slider*/
.slider_box{margin:40px auto 0 auto;height:375px;overflow:hidden;position:relative;width:1024px;}
.mask{height:100px;overflow:hidden;background:#000;opacity:0.7;filter:alpha(opacity:70);width:100%;position:absolute;left:0;bottom:0;z-index:1;border-top:solid 2px #ddd;}
.silder_con{overflow:hidden;position:absolute;}
.silder_panel{width:1024px;height:375px;overflow:hidden;float:left;position:relative;}
.silder_panel img{width:1024px;height:375px;display:block;overflow:hidden;overflow:hidden}
.silder_nav li{float:left;padding:0px;border:1px solid #fff;margin:2px;display:inline;position:relative;}
.silder_nav li.current{border:3px solid #7acf39;margin:0 4px;}
.silder_nav li,.silder_nav img{display:block;width:112px;height:48px;overflow:hidden;}
.slider_box a.prev,.slider_box a.next{display:block;width:45px;height:100px;line-height:999em;overflow:hidden;z-indent:9;position:absolute;cursor:pointer;margin:85px 0 0 0;background:url(../images/silder_btn.gif) no-repeat;}
.slider_box a.prev{left:0;background-position:left 0;}
.slider_box a.next{right:0;background-position:right 0;}
.silder_intro{position:absolute;left:30;bottom:0;z-index:9;width:400px;height:100px;overflow:hidden;color:#fff;padding-left:20px;}
.silder_intro h3{font-size:20px;font-weight:bold;margin:10px 0 5px 0;height:22px;line-height:22px;}
.silder_intro p{font-size:12px;line-height:20px;}
.dec{float:right;height:100px;width:605px;bottom:-10px;right:0;overflow:hidden;z-index:9;position:absolute;}
.dec li{margin-top:20px;float:left;display:inline;}

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