您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下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>jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
以上是“jquery如何实现图片无缝滚动 蒙版遮蔽效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。