版权声明:互相学习,共同进步!! https://blog.csdn.net/hello_word2/article/details/84068351
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0
}
.container {
width: 800px;
height: 300px;
border: 1px solid skyblue;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.container .imgUL {
list-style: none;
}
.container .imgUL li {
position: absolute;
}
.container .imgUL li .cover {
position: absolute;
width: 100%;
height: 300px;
background:rgba(0,0,0,0.5);
}
.li1 {
left: 160px
}
.li2 {
left: 320px
}
.li3 {
left: 480px
}
.li4 {
left: 640px
}
</style>
</head>
<body>
<div class="container">
<ul class="imgUL">
<li class="li0">
<div class="cover"></div>
<img src="img/0.jpg">
</li>
<li class="li1">
<div class="cover"></div>
<img src="img/1.jpg">
</li>
<li class="li2">
<div class="cover"></div>
<img src="img/2.jpg">
</li>
<li class="li3">
<div class="cover"></div>
<img src="img/3.jpg">
</li>
<li class="li4">
<div class="cover"></div>
<img src="img/4.jpg">
</li>
</ul>
<script>
var lis = $('.container li');
lis.mouseenter(function () {
console.log('aaa');
$(this).find('.cover').stop(true).fadeOut();
}).mouseleave(function () {
$(this).find('.cover').stop(true).fadeIn();
lis.stop(true);
$('.li1').animate({'left':160},500);
$('.li2').animate({'left':320},500);
$('.li3').animate({'left':480},500);
$('.li4').animate({'left':640},500);
});
$('.li0').mouseenter(function () {
lis.stop(true);
$('.li1').animate({'left':560},500);
$('.li2').animate({'left':620},500);
$('.li3').animate({'left':680},500);
$('.li4').animate({'left':760},500);
})
$('.li1').mouseenter(function(){
lis.stop(true);
$('.li1').animate({'left':60},500);
$('.li2').animate({'left':620},500);
$('.li3').animate({'left':680},500);
$('.li4').animate({'left':760},500);
});
$('.li2').mouseenter(function(){
lis.stop(true);
$('.li1').animate({'left':60},500);
$('.li2').animate({'left':120},500);
$('.li3').animate({'left':680},500);
$('.li4').animate({'left':760},500);
});
$('.li3').mouseenter(function(){
lis.stop(true);
$('.li1').animate({'left':60},500);
$('.li2').animate({'left':120},500);
$('.li3').animate({'left':180},500);
$('.li4').animate({'left':740},500);
});
$('.li4').mouseenter(function(){
lis.stop(true);
$('.li1').animate({'left':60},500);
$('.li2').animate({'left':120},500);
$('.li3').animate({'left':180},500);
$('.li4').animate({'left':240},500);
});
</script>
</div>
</body>
</html>