<!doctype html>
<html><head>
<meta charset="utf-8">
<title>17.10jQuery案例九带标题的水平手风琴切换</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var i=0;//轮播起始位置索引
var timer = null;//设置定时器
var slowSpeed = 1000;//设置慢速
var fastSpeed = 3000;//设置快速
//定义播放函数
function play(){
if(i==$('#sfq li').length){i=0;}
$('#sfq li').eq(i).animate({'width':'500px'},slowSpeed) .siblings().animate({'width':'100px'},slowSpeed);
$('#sfq li').eq(i).children('div').fadeIn(slowSpeed);
$('#sfq li').eq(i).siblings().children('div').fadeOut(slowSpeed);
i++;
}
//函数结束
timer = setInterval(play,fastSpeed);
$('#sfq li').click(function(){i= $(this).index();play();})
.mouseenter(function(){clearInterval(timer);})
.mouseleave(function(){timer = setInterval(play,fastSpeed);});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style-type:none;
}
#sfq{
width:900px;
height:333px;
border:2px solid #666;
overflow:hidden;
margin:0 auto;
}
#sfq li{
position:relative;
width:100px;
height:333px;
overflow:hidden;
float:left;
opacity:0.5;
cursor:pointer;
}
#sfq li img{ height:333px; width:500px;}
#sfq li:first-child{
opacity:1;}
#sfq li:first-child{
width:500px;
}
#sfq li:first-child div{
display:block;
opacity:0.5;
}
#sfq li div{
position:absolute;
left:0;
bottom:0;
height:50px;
width:100%;
background-color:#000;
line-height:50px;
text-align:center;
opacity:0.5;
display:none;
}
#sfq li div a{
text-decoration:none;
color:#FFF;
font-weight:bolder;
font-size:16px;
}
#sfq li div a:hover{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<ul id="sfq">
<li>
<img src="img5/1.jpg">
<div><a href="#">标题1</a></div>
</li>
<li>
<img src="img5/2.jpg">
<div><a href="#">标题2</a></div>
</li>
<li>
<img src="img5/3.jpg">
<div><a href="#">标题3</a></div>
</li>
<li>
<img src="img5/4.jpg">
<div><a href="#">标题4</a></div>
</li>
<li>
<img src="img5/5.jpg">
<div><a href="#">标题5</a></div>
</li>
</ul>
</body>
</html>
默认效果
鼠标单击第三个图效果
