1

所以我找到了这个脚本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple Slide Show with jQuery</title>
    <script type='text/javascript'
    src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
    </script>
    <script type="text/javascript">
        var imgs = [
        'images/emo.jpg',
        'images/icon068.gif',
        'images/icon260.jpg'];
        var cnt = imgs.length;

        $(function() {
            setInterval(Slider, 3000);
        });

        function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
           $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
        });
        }
</script>
</head>
<body>
    <img id="imageSlide" alt="" src="" />
</body>
</html>

这几乎对我有用。

如何转换它以便图像不是硬编码但脚本动态适应图像数量？我打算经常更改滑块图像 - 图像的数量并不总是相同的。

我不是 javascript 专家，所以如果它很简单，请不要笑。

4

2 回答 2

1

您的代码应该适用于动态图像数组。

使用这样的东西：

function addImage(url) { 
   imgs.push(url); 
   cnt = imgs.length; 
}
function removeImage(url) { 
   if( imgs.indexOf(url) > -1 ) {
     imgs.splice( imgs.indexOf(url), 1 ); 
     cnt = imgs.length;
   } 
}
于 2012-04-29T11:44:53.967 回答
0

从查看源代码来看，脚本似乎不应该工作：当数组的长度设置为零时，它变为空 - 即使稍后将数组的长度改回（在 Chrome 中测试和验证）。

检查 jQuery 循环插件 (http://jquery.malsup.com/cycle/)。由于您已经在使用 jQuery（或脚本），这可能对您来说是完美的 - 只需生成一个包含所有图像的 div，然后告诉插件循环它们，然后根据需要添加新图像，插件应该自动使用它们。

这是此插件的基本演示；使用超级简单（链接jQuery，链接插件，包含图片，将插件指向图片）：http:
//jquery.malsup.com/cycle/basic.html（源代码）

如果需要，您可以设置自定义插件的选项列表：http:
//jquery.malsup.com/cycle/options.html
特别感兴趣的是：fx（使用的过渡），速度，缓动（过渡的速度曲线）。

编辑：这是我写的一个小脚本（未经测试）：

Cycler=function(container){
  var container=$(container);
  var running=false;
  var stopping=false;

  this.start=function(){
    stopping=false;
    if(!running) run();
  }

  this.stop=function(){
    stopping=true;
  }

  var run=function(){
    if(stopping){
      running=false;
      stopping=false;
      return;
    }
    running=true;
    var old=container.find(':visible');
    var new=old.nextSibling();
    if(!new.length) new=container.children(':first');

    old.fadeOut('slow');
    new.fadeIn('slow', run);
  }
}

它远非完美，但你可以从那开始。

于 2012-04-29T12:10:36.443 回答