图片淡入淡出,轮播切换,鼠标移入停止,移出继续开始效果;
有时候我们需要进行图片展示(例如广告),图片多的情况下,需要循环播放,但是又不希望出现轮播图的效果.
这时候就用到了淡入淡出的效果;
代码比较简单,就不解释了…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<script src="jquery/jquery-1.11.2.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.box{border: 2px solid red;width: 648px;height: 300px;overflow: hidden;position: relative;}
li{position: absolute;}
li,li img{width:100%;height: 100%;}
</style>
</head>
<body>
<div class="box">
<ul id="ul">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/emma1-100×100.jpg"/></li>
</ul>
</div>
<script>
var flag=true;
setInterval(function () {
if(flag){
$("li:last").animate({
opacity: 0
}, 1000,function () {
$(this).css("opacity","1").prependTo("#ul");
} );
}
},2000);
$("#ul").hover(function () {
flag=false;
},function () {
flag=true;
})
</script>
</body>
</html>