图片循环滚动,鼠标放上时停止并且虚化其他图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 600px;
height: 160px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul{
list-style: none;
width: 1800px;
height: 160px;
background: rgba(0,0,0,0.5);
}
ul>li{
float: left;
}
img{
width: 300px;
height: 160px;
}
</style>
<script type="text/javascript">
$(function(){
//定义偏移量
var offset = 0;
var timer;
function autoPlay(){
//让图片滚动,六张图片
timer =setInterval(function(){
offset -=10;
if(offset<= -1200){
offset = 0;
}
$("ul").css("margin-left",offset);
},50);
}
autoPlay();
$("li").hover(function(){
clearInterval(timer);
//给非当前元素添加蒙版
$(this).siblings().fadeTo(100,0.5);
//去除当前选中的蒙版
$(this).fadeTo(100,1);
},function(){
autoPlay();
//去除所有蒙版
$("li").fadeTo(100,1);
})
})
</script>
</head>
<body>
<div>
<ul>
<li><img src="image/0.jpg" alt=""></li>
<li><img src="image/1.jpg" alt=""></li>
<li><img src="image/2.jpg" alt=""></li>
<li><img src="image/3.jpg" alt=""></li>
<li><img src="image/0.jpg" alt=""></li>
<li><img src="image/1.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
效果图:
虚化鼠标所处的其他图片。