Question

我有一个图像，当它在里面的div是mousedover时，我想要一个幻灯片类型的东西开始，它在第一个图像淡化，淡化到第二个图像，淡化到第三个等...在mouseout上，它会淡化回原始图像。

我尝试使用带有jQuery的Cycle插件，但我正在使用的网站托管了一个不兼容的jquery版本，很遗憾它是不可编辑的。所以，我试着自己做，但问题很多。

HTML：

   <div class="pro_feature" onmouseover="cyk()" onmouseout="norm()">
       <div><img id="cykimg" src="sweet2.jpg" /></div>
            <span>
               <h2>Sweet</h2>
               <p>lots of text</p>
               <a href="link.html">View Products</a>
            </span>
   </div><!-- end pro_feature -->

JS：

function cyk(){
    setTimeout(one1(),3000);
    setTimeout(two2(),6000);
    setTimeout(three3(),9000);
    setTimeout(four4(),12000);
}

function one1(){
    $("#cykimg").attr("src","/SXW-AOC-1D.jpg");
}
function two2(){
    $("#cykimg").attr("src","/SXW-AOVB-1D.jpg");
}
function three3(){
    $("#cykimg").attr("src","/SXW-CC-1D.jpg");
}
function four4(){
    $("#cykimg").attr("src","/SXW-SCCS-1D.jpg");
}

function norm(){
    $("#cykimg").attr("src","/sweet2.jpg");
}

问题：

它会立即转到最后一张图片，由four4（）;
它不会褪色
它没有循环

我一直在寻找解决方案很长一段时间，但我真的没有找到任何让我远程关闭的东西（不包括我不能使用的循环）。任何帮助或输入表示赞赏。如果可行/更容易，我会使用jQuery。

Answer 1

您需要将函数本身作为回调提供，而是在设置超时时调用它。

所以而不是：

setTimeout(one1(),3000);

应该是

setTimeout(one1, 3000);

Answer 2

看起来函数没有在setTimeout中正确调用。你可以尝试类似的东西：

setTimout(function () {

    one1();

},1000);

以下是一个可能有用的小例子：http://jsfiddle.net/JeffreyTaylor/WTUA5/2/

使用javascript循环浏览多个图像

2 个答案: