使用 javascript 循环浏览多个图像

Cycle through multiple images onmoueover using javascript

本文关键字：图像 浏览 javascript 循环 使用      更新时间：2023-09-26

我有一个图像，当它里面的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 很好。

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

所以代替：

setTimeout(one1(),3000);

它应该是

setTimeout(one1, 3000);

看起来函数没有在您的 setTimeout 中正确调用。 您可以尝试如下操作：

setTimout(function () {
    one1();
},1000);

这里有一个小例子，可能会有所帮助：http://jsfiddle.net/JeffreyTaylor/WTUA5/2/

相关文章：