Question

我尝试通过点击淡入淡出来更改一组图像。但是代码不起作用。我不确定为什么不工作。

我错过了什么吗？或者我应该从代码中删除任何内容吗？

提前致谢

<!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>

淡入淡出过渡JavaScript和HTML5

0 个答案: