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 を使用している (またはスクリプトを使用している) 場合、これは最適な場合があります。内部にすべての画像を含む 1 つの div を生成し、プラグインにそれらを循環させるように指示し、必要に応じて新しい画像を追加すると、プラグインは次のようになります。それらを自動的に使用します。

このプラグインの基本的なデモは次のとおりです。使用法は非常に簡単です (jQuery をリンクし、プラグインをリンクし、画像を含め、プラグインを画像に向けます):
http://jquery.malsup.com/cycle/basic.html (ソース コード)

必要に応じて、プラグインをカスタマイズするために設定できるオプションのリストを次に示します :
http://jquery.malsup.com/cycle/options.html
トランジションの速度曲線)。

編集：ここに私が書いた小さなスクリプトがあります（テストされていません）：

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 に答える