用到的方法:mouseenter 和 mouseleave 鼠标移入和移出,另一种方法是添加一个hover事件,该事件中规定传两个方法,分别对应mouseenter和mouseleave,两种方法都可实现,fadeTo:褪色,ul的背景颜色最好是黑色,否则褪色后颜色怪异,或者用css的滤镜添加一个亮度contrast(50%)样式,均可实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>picture</title>
<link href="../../../img/camera.ico" rel="icon">
<script src="../../../jquery-3.4.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 400px;
height: 150px;
margin: 10px auto;
border: 1px solid #333333;
position: relative;
overflow: hidden;
}
.banner {
position: absolute;
list-style: none;
width: 1200px;
height: 150px;
background-color: black;
}
.banner li {
float: left;
width: 200px;
height: 150px;
}
.banner li img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<ul class="banner">
<li><img src="../../../img/5.jpg"></li>
<li><img src="../../../img/6.jpg"></li>
<li><img src="../../../img/7.jpeg"></li>
<li><img src="../../../img/8.jpeg"></li>
<li><img src="../../../img/5.jpg"></li>
<li><img src="../../../img/6.jpg"></li>
</ul>
</div>
<script>
$(function () {
let $ul = $('.banner');
let offsetLeft = 0;//define a variable save displacement
let timer;
timer = setInterval(fn, 10);
function fn() {
offsetLeft -= 1;
if (offsetLeft < -800) {
offsetLeft = 0;
}
$ul.css('left', offsetLeft);
}
//方法一
// $ul.children().on('mouseenter', function () {
// clearInterval(timer);
// // $(this).siblings().css({filter: 'contrast(50%)'})//css滤镜
// $(this).siblings().fadeTo(100,0.5);//褪色
// }).on('mouseleave', function () {
// timer = setInterval(fn, 10);
// // $(this).siblings().css({filter: 'contrast(100%)'});
// $(this).siblings().fadeTo(0,1);
// });
//方法二
//hover里面写两个方法 相当于mouseenter和mouseleave,如果只写一个则enter和leave都执行这个方法
$ul.children().hover(function () {
clearInterval(timer);
// $(this).siblings().css({filter: 'contrast(50%)'})//css滤镜
$(this).siblings().fadeTo(100,0.5);//褪色
},function () {
timer = setInterval(fn, 10);
// $(this).siblings().css({filter: 'contrast(100%)'});
$(this).siblings().fadeTo(0,1);
})
})
</script>
</body>
</html>
效果展示: