图片的淡入淡出
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片的淡入淡出相关的知识，希望对你有一定的参考价值。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQuery控制图片淡入淡出效果</title>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
ul li{position:absolute;left:50px;top:20px;}
ul li img{width:300px;height:300px;}
</style>
</head>
<body>
<div id="div1" style="width:300px;height:300px;">
<ul>
<li><img src="img/test1.jpg"></li>
<li><img src="img/test2.jpg"></li>
<li><img src="img/test3.jpg"></li>
<li><img src="img/test4.jpg"></li>
<li><img src="img/test5.jpg"></li>
</ul>
</div>
<script>
var speed=2000;
var count = jQuery("#div1 ul li").size();
var n = count;
var div1 = document.getElementById("div1");
function fadeOut(){
if(! $("ul li").eq(n).is(":hidden")){
console.log("fadeOut")
$("ul li").eq(n).fadeOut("slow")
}else{
console.log("fadeIn")
$("ul li").eq(n).fadeIn("slow")
}
n--;
if(n == 0){
n = 2;
};
}
var MyMar=setInterval(fadeOut,speed)
div1.onmouseover=function() {clearInterval(MyMar)}
div1.onmouseout=function() {MyMar=setInterval(fadeOut,speed)}
</script>
</body>
</html>
以上是关于图片的淡入淡出的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 复制 bing 图片主页效果（淡入，然后淡出）
如何在 css 中使用 @keyframes 交叉淡入淡出图片库？