您的位置：首页 > Web前端 > JQuery

jquery实现图片无缝滚动，蒙版遮蔽效果

2018-11-01 14:29 246 查看

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=<
20000
/span>"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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航