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>
<script type="text/javascript" src="js/jQuery.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="slider_box" id="slider_name">
	<ul class="silder_con">		
		<li class="silder_panel"><a href="#" class="f_l"><img src="images/banner_bg.jpg" /></a></li>
		<li class="silder_panel"><a href="#" class="f_l"><img src="images/banner-04.jpg" /></a></li>
		<li class="silder_panel"><a href="#" class="f_l"><img src="images/banner-01.jpg"  /></a></li>
		<li class="silder_panel"><a href="#" class="f_l"><img src="images/banner-02.jpg" /></a></li>
		<li class="silder_panel"><a href="#" class="f_l"><img src="images/banner-03.jpg" /></a></li>
	</ul>
	<ul class="silder_nav">            
		<li><a href="#">美国EB-5投资移民巅峰巨献</a></li>    
		<li><a href="#">大获成功,认购已逾200席</a></li>    
		<li><a href="#">全球首发会上海站大获成功</a></li>    
		<li><a href="#">全球首发会苏州站大获成功</a></li>    
		<li><a href="#">全球首发会深圳站大获成功</a></li>    
	</ul>
</div>
<script src="js/jquery.slides.js" type="text/javascript"></script>
</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.8","filter":"alpha(opacity=80)"}
).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":"1"}
,300).eq(index).stop(true,false).animate({
	"opacity":"1"}
,300);
}
}
);

CSS代码(slider.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/* slider_box */
.slider_box{width:940px;margin:40px auto;height:346px;overflow:hidden;position:relative;}
.silder_con{height:346px;overflow:hidden;position:absolute;}
.silder_panel{width:940px;height:346px;overflow:hidden;float:left;position:relative;}
.silder_panel img{width:940px;height:346px;display:block;overflow:hidden;}
.silder_nav{width:960px;height:50px;margin:0px auto;bottom:0px;position:absolute;overflow:hidden;}
.silder_nav li{float:left;width:187px;height:50px;font-size:14px;text-align:center;padding:0px;margin-right:1px;background:url(../images/homeBannerDdBgThis.png);line-height:50px;font-family:'微软雅黑';}
.silder_nav li a{color:#fff;}
.silder_nav li.current{background:url(../images/homeBannerDdBg.png);}
.slider_box a.prev,.slider_box a.next{display:block;width:45px;height:100px;overflow:hidden;text-indent:-999px;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;}

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