jquery:手風琴圖片輪播
html部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="jscontent/index.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.menu li{
list-style: none;
float: left;
width: 100px;
height: 300px;
overflow: hidden;
}
.menu li>span{
position: absolute;
display: block;
width: 100px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: rgba(191, 215, 255, 0.42);
}
.menu li>img{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<ul class="menu">
<li><span>風景</span><img src="./img/1.jpg" alt=""/></li>
<li><span>風景</span><img src="./img/2.jpg" alt=""/></li>
<li><span>風景</span><img src="./img/3.jpg" alt=""/></li>
<li><span>風景</span><img src="./img/4.jpg" alt=""/></li>
<li><span>風景</span><img src="./img/5.jpg" alt=""/></li>
<li><span>風景</span><img src="./img/6.jpg" alt=""/></li>
</ul>
</body>
</html>
js部分：
/**
* Created by Administrator on 2019/2/26.
*/
$(function(){
$(".menu").bind("mouseleave",function(){
$(this).children("li").each(function(){
if($(this).prop("data-show")){//判斷是否有打開的
$(this).animate({
width:100
},300);
}
})
}).children("li").each(function(){
$(this).bind("mouseenter",function(){
//添加一個標記
$(this).prop("data-show",true);
$(this).stop().animate({
width:500
},300).siblings().stop().animate({
width:100
},300,function(){
$(this).removeAttr("data-show")
})
})
})
})