jquery实现图片无缝滚动 蒙版遮蔽效果
程序员文章站
2022-04-14 15:13:19
本文实例为大家分享了jquery实现图片无缝滚动、蒙版效果的具体代码，供大家参考，具体内容如下
1、无缝连接：通过对li设置属性float：left；消除标签之间的间隔
2、通过对...
本文实例为大家分享了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实现轮播图效果demo