0

我有一个图像，当它在里面的 div 是鼠标悬停时，我想要一个幻灯片类型的东西开始，它淡入第一张图像，淡出到第二张图像，淡出到第三张等等......并且在鼠标悬停时它淡出回到原始图像。

我尝试将 Cycle 插件与 jQuery 一起使用，但我正在使用的站点托管的是不兼容的 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（）调用；
  • 它不会褪色
  • 它不循环通过

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

4

2 回答 2

1

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

所以而不是：

setTimeout(one1(),3000);

它应该是

setTimeout(one1, 3000);
于 2013-10-09T00:13:51.367 回答
0

看起来这些函数在你的 setTimeout 中没有被正确调用。您可以尝试以下方法：

setTimout(function () {

    one1();

},1000);

这是一个可能有帮助的小例子：http: //jsfiddle.net/JeffreyTaylor/WTUA5/2/

于 2013-10-09T00:27:08.437 回答