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=gb2312" />
<title>jquery带标题水平手风琴切换</title>
<style type="text/css">
*{padding:0;margin:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

/* demo */
#demo{width:730px;height:319px;border:1px solid #CCC;margin:20px auto;overflow:hidden;}
#demo li{float:left;position:relative;width:60px;height:100%;overflow:hidden;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;cursor:pointer;}
#demo li div{position:absolute;width:100%;height:50px;line-height:50px;background:#000;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;bottom:0;left:0;display:none;text-align:center;}
#demo li div a{color:#FFF;text-decoration:none;}
#demo li div a:hover{color:#F00;text-decoration:none;}
#demo li:first-child{width:490px;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
#demo li:first-child div{display:block;}
</style>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script language="javascript">
$(document).ready(function(e){
	  var opt	=	{
		"speed"	:	"slow"		,	//变换速度,三速度可选 slow,normal,fast;
		"by"	:	"click"		,	//触发事件,click或者mouseover;
		"auto"	:	true		,	//是否自动播放;
		"sec"	:	3000	 		//自动播放间隔;

	  };
      $("#demo").IMGDEMO(opt);    
});
</script>

</head>
<body>


<ul id="demo">
	<li>
		<img src="images/1.jpg" width="490"  height="319" />
		<div><a href="#">标题1</a></div>
	</li>
	<li>
		<img src="images/2.jpg" width="490"  height="319" />
		<div><a href="2">标题2</a></div>
	</li>
	<li>
		<img src="images/3.jpg" width="490"  height="319" />
		<div><a href="3">标题3</a></div>
	</li>
	<li>
		<img src="images/4.jpg" width="490"  height="319" />
		<div><a href="3">标题4</a></div>
	</li>
	<li>
		<img src="images/5.jpg" width="490"  height="319" />
		<div><a href="4">标题5</a></div>
	</li>
</ul>
</body>
</html>

JS代码(script.js):

(function($){
	$.fn.extend({
	IMGDEMO:function(opt){
	var opt= arguments[0] ? arguments[0]:false;
	var $button = $(this).children("li");
	//容器;
	var $sec= 3000;
	//自动播放默认时间;
	var $min= $button.last().width();
	//最小宽度;
	var $max= $button.first().width();
	//最大宽度;
	var $index= 1;
	//轮播开始索引号;
	$default ={
	//默认参数;
	speed:opt.speed?opt.speed:"slow",by:opt.by?opt.by:"click",auto:opt.auto?opt.auto:false,sec:opt.sec?opt.sec < 1000 ? 1000:opt.sec:$sec,maxWidth:$max,minWidth:$min,index:$index}
;
	$button.bind($default.by,this.run).autoPlay();
	//绑定事件;
}
,run:function(){
	//运行方法;
	var $obj = $(this);
	if ($obj.width() == $default.minWidth){
	var timeDo = window.setTimeout(function(){
	$default.index = $obj.index();
	$obj.anim();
}
,100);
	$obj.mouseout(function(){
	window.clearTimeout(timeDo);
}
);
}
}
,autoPlay:function(){
	//自动播放;
	if ($default.auto){
	var $this = $(this);
	$this.autoDo();
	$this.mouseover(function(){
	window.clearInterval(timeL);
}
);
	$this.mouseout(function(){
	$this.autoDo();
}
);
}
}
,autoDo:function(){
	//播放方法;
	var $len=$(this).length - 1;
	var $this=$(this);
	timeL=window.setInterval(function(){
	$this.eq($default.index).anim();
	$default.index < $len ? $default.index++:$default.index = 0;
}
,$default.sec);
}
,anim:function(){
	//动画方法;
	var $fx = function(){
	$(this).siblings("li").animate({
	width:$default.minWidth,opacity:0.5}
,$default.speed).css("cursor","pointer");
	$(this).animate({
	width:$default.maxWidth,opacity:1}
,$default.speed).css("cursor","default");
	$(this).siblings("li").children("div").fadeOut();
	$(this).children("div").fadeTo($default.speed,0.7);
	$(this).dequeue();
}
;
	$(this).queue($fx);
}
}
);
}
)(jQuery);

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