淡入过渡JavaScript和HTML5
我正试图通过单击一组带有淡入淡出过渡的图像来更改它们。但代码不起作用。我真的不知道为什么它不工作 我错过什么了吗？或者我应该从代码中删除什么 提前谢谢淡入过渡JavaScript和HTML5,javascript,html,css,Javascript,Html,Css,我正试图通过单击一组带有淡入淡出过渡的图像来更改它们。但代码不起作用。我真的不知道为什么它不工作 我错过什么了吗？或者我应该从代码中删除什么 提前谢谢 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>CSS3 fade transition demo - jsF
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS3 fade transition demo - jsFiddle demo by arunberti</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#container {position: relative; font-size: 0; height: 266px; width: 400px;}
.slide {
border: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.showMe {opacity: 1;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
/*var timer = setInterval(nextImage, 4000);*/
var curImage = 0;
var numImages = 5;
$('#container').click(function() {
/*function nextImage() {*/
var e;
// remove showMe class from current image
e = document.getElementById("slideimg" + curImage);
removeClass(e, "showMe");
// compute next image
curImage++;
if (curImage > numImages - 1) {
curImage = 0;
}
// add showMe class to next image
e = document.getElementById("slideimg" + curImage);
addClass(e, "showMe");
});
function addClass(elem, name) {
var c = elem.className;
if (c) c += " "; // if not blank, add a space separator
c += name;
elem.className = c;
}
function removeClass(elem, name) {
var c = elem.className;
elem.className = c.replace(name, "").replace(/\s+/g, " ").replace(/^\s+|\s+$/g, "");
// remove name and extra blanks
}
});//]]>
</script>
</head>
<body>
<div id="container" >
<img id="slideimg0" class="slide showMe" src="mountains_640x480.jpg">
<img id="slideimg1" class="slide" src="Sabio.png">
<img id="slideimg2" class="slide" src="TDialogBox.png">
<img id="slideimg3" class="slide" src="Lys_izq.png">
</div>
</body>
</html>
CSS3淡入淡出过渡演示-arunberti的JSFIDLE演示
#容器{位置：相对；字体大小：0；高度：266px；宽度：400px；}
.幻灯片{
边界：无；
不透明度：0；
位置：绝对位置；
排名：0；
左：0；
-webkit转换：线性；
-moz转变：线性；
-o-转变：线性；
过渡：线性；
}
.showMe{opacity:1；}
//数字图像-1）{
curImage=0；
}
//将showMe类添加到下一个图像
e=document.getElementById（“slideimg”+curImage）；
addClass（e，“showMe”）；
});
函数addClass（元素，名称）{
var c=elem.className；
如果（c）c+=“”；//如果不为空，请添加空格分隔符
c+=名称；
elem.className=c；
}
函数removeClass（元素，名称）{
var c=elem.className；
elem.className=c.replace（name，“”）。replace（/\s+/g，“”）。replace（/^\s+\s+$/g，“”）；
//删除名称和额外空格
}
});//]]>
numImages