···<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
{margin: 0; padding:0; list-style: none;}
#ul1{
width: 520px;
height: 280px;
position: absolute;
top:50%;
left:50%;
margin: -180px 0 0 -260px;
overflow: hidden;
}
#ul1 li{
width: 520px;
height: 280px;
position: absolute;
left: 0;
top:0;
}
</style>
<script src="js/jquery-1.7.2.js"></script>
</head>
<body>
<ul id="ul1">
<li>
<li>
<li>
<li>
<li>
</ul>
</body>
<script>
$(()=>{
const W=30;
//js设置ul的宽度
$('ul').css({width:520+W($('ul li').length-1)});
//大于第0个的li的定位
$('ul li:gt(0)').each((i,e)=>{
$(e).css({left:520+Wi});
});
//li移入的时候
$('ul li').mouseenter(function (i,e) {
var iNow=$(this).index();//每个li的索引
$('ul li').each((i,e)=>{
if (i<=iNow){//左边
$(e).stop().animate({'left':iW});
}else{ //右边
$(e).stop().animate({'left':520+(i-1)*W});
}
});
})
})
</script>
</html>···
