<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.16jQuery案例十四轮播与手风琴结合</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var timer = null;
var index = 0;
var speed = 1000;
var size = $('#div1 ul').length;
//
function display(index){
$('#div1 ul').eq(index).show()
.siblings().hide();
}
function autoPlay(){
if(index==size){ index=0;}
else index++;
display(index);
}
timer = setInterval(autoPlay,speed);
$('#div1').mouseenter(function(){
clearInterval(timer);
});
$('#div1').mouseleave(function(){
timer = setInterval(autoPlay,speed);
});
$('#div1 ul li').mouseenter(function(){
$(this).animate({'width':'500px'},100)
.siblings().animate({'width':'100px'},100);
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style-type:none;
}
#div1{
width:900px;
height:200px;
margin:20px auto;
border:solid 2px red;
}
#div1 ul{
width:100%;
height:100%;
display:none;
overflow:hidden;
}
#div1 ul:first-child{ display:block;}
#div1 ul li{
width:100px;
height:100%;
float:left;
}
#div1 ul li img{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img3/1.jpg"></li>
<li><img src="img3/2.jpg"></li>
<li><img src="img3/3.jpg"></li>
<li><img src="img3/4.jpg"></li>
<li><img src="img3/5.jpg"></li>
</ul>
<ul>
<li><img src="img3/6.jpg"></li>
<li><img src="img3/7.jpg"></li>
<li><img src="img3/8.jpg"></li>
<li><img src="img3/9.jpg"></li>
<li><img src="img3/10.jpg"></li>
</ul>
<ul>
<li><img src="img3/11.jpg"></li>
<li><img src="img3/12.jpg"></li>
<li><img src="img3/13.jpg"></li>
<li><img src="img3/14.jpg"></li>
<li><img src="img3/15.jpg"></li>
</ul>
</div>
</body>
</html>
