jquery实现图片无缝滚动 蒙版遮蔽效果
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jquery实现图片无缝滚动，蒙版遮蔽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现图片无缝滚动、蒙版效果的具体代码，供大家参考，具体内容如下
1、无缝连接：通过对li设置属性float：left；消除标签之间的间隔
2、通过对ul整体进行偏移设置，使图片整体滚动，
3、设置图片切换时机，
4、蒙版遮罩移入时机的选择
代码片.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 400px;
height: 150px;
overflow: hidden;
border: 1px solid #A9A9A9;
margin: 30px auto;
}
.ul1{
position: relative;
left: 0px;
width: 1200px;
}
.ul1>li{
position: relative;
list-style: none;
float: left;
width: 200px;
height: 150px;
background: #3388FF;
}
.ul1>li>div{
position: absolute;
left: 0;
top: 0;
background: #A9A9A9;
width: 200px;
height: 150px;
opacity: 0;
}
</style>
</head>
<body>
<div class="div1">
<ul class="ul1">
<li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
<li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
<li><img src="../img/wall3.jpg" alt="" width="100%"/><div></div></li>
<li><img src="../img/wall4.jpg" alt="" width="100%"/><div></div></li>
<li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
<li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
</ul>
</div>
<script>
$(function(){
var $time = '';
var mi = 0;
gundong();
function gundong(){
$time = setInterval(function(){
mi += -10;
if (mi<-800) {
mi = 0
}
$('.ul1').css({
marginLeft: mi+'px'
});
},100);
}
$('li').mouseover(function(){
window.clearTimeout($time);
$('li').not($(this)).contents('div').css({
opacity:0.6
});
});
$('li').mouseout(function(){
gundong();
$('li').not($(this)).contents('div').css({
opacity:0
});
});
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。