3

私はJavaScriptチュートリアルを使用して、大学の課題にJavaScriptを実装するのに役立てています。したがって、画像のスライドショーを作成するために1つを使用しました。これには、次のようなifステートメントが含まれています。

if (!document.images)
    return
document.images.SlideShow1.src=eval("image"+slide+".src

(!document.images)しかし、私はそれが特にその部分で何をしているのかよくわかりません。

編集

また、このチュートリアルで間違った選択をしたことがわかるので、誰かが良い画像のスライドショーを作成する方法を教えてくれますか、それとも単に良いチュートリアルに案内してくれますか？これは私が現在使用しているすべてのコードです

<head>
<script type="text/javascript">
        <!--
        var image1=new Image()
        image1.src="Images/Foam2012/Misty.gif"
        var image2=new Image()
        image2.src="Images/Foam2012/Foamy.gif"
        var image3=new Image()
        image3.src="Images/Foam2012/17.gif"
        var image4=new Image()
        image4.src="Images/Foam2012/16.gif"
        var image5=new Image()
        image5.src="Images/Foam2012/2.gif"
        var image6=new Image()
        image6.src="Images/Oxjam2012/Rainbow.gif"
        var image7=new Image()
        image7.src="Images/Oxjam2012/17.gif"
        var image8=new Image()
        image8.src="Images/Oxjam2012/9.gif"
        var image9=new Image()
        image9.src="Images/Oxjam2012/2.gif"
        var image10=new Image()
        image10.src="Images/RagDay2012/GasMask.gif"
        var image11=new Image()
        image11.src="Images/RagDay2012/22.gif"
        var image12=new Image()
        image12.src="Images/RagDay2012/21.gif"
        var image13=new Image()
        image13.src="Images/RagDay2012/20.gif"
        var image14=new Image()
        image14.src="Images/RagDay2012/16.gif"
        var image15=new Image()
        image15.src="Images/RagDay2012/6.gif"
        var image16=new Image()
        image16.src="Images/RagDay2012/5.gif"       
        var image17=new Image()
        image17.src="Images/RagDay2012/4.gif"
        var image18=new Image()
        image18.src="Images/RagDay2012/1.gif"
        var image19=new Image()
        image19.src="Images/UV2012/17.gif"
        var image20=new Image()
        image20.src="Images/UV2012/14.gif"
        var image21=new Image()
        image21.src="Images/UV2012/9.gif"
        var image22=new Image()
        image22.src="Images/UV2012/7.gif"
        var image23=new Image()
        image23.src="Images/UV2012/6.gif"
        //-->
    </script>
</head>
<body>
<img id="SlideShow1" style="padding-bottom: 5px" src="Images/Foam2012/Foamy.gif"      width="350px" height="300px" alt="Image Slideshow"/>
    <script type="text/javascript">
        <!--
        var slide = 1
        //Declares a variable called slide which equals 1
        function slideit(){
        if (!document.images)
        return
        document.images.SlideShow1.src=eval("image"+slide+".src")
        if (slide<23)
        slide++
        else
        slide = 1
        //call function "slideit()" every 1.5 seconds
        setTimeout("slideit()",1500)
        }
        slideit()
        //-->
    </script>
</body>
4

3 に答える 3

3

このチュートリアルを置いてください！それは（a）古代です...

if (!document.images)
   return

これは、コレクションの機能スニッフィングを行っています。これは、要素imagesを取得するための昔ながらの方法です。<img>Netscape 3以降のすべてのJavaScript対応ブラウザはその配列をサポートしているため、1996年の奇妙なヴィンテージのスクリプトが表示されます。

...そして（b）ひどい。

document.images.SlideShow1.src=eval("image"+slide+".src");

これは、彼らが何をしているのか本当に手がかりがない人のしるしです。[]構文を使用して、常にオブジェクトのプロパティにアクセスできます。

document.images.SlideShow1.src=window['image'+slide].src;

したがって、文字列でJavaScript式を作成し、それを実行するために、遅くて危険でひどい方法を使用する必要はありませんでしたeval。1996年の標準でも、これは不十分です。

しかし、そうであっても、名前をオフにして変数にアクセスすることwindowは、通常、疑わしいものです。

ETA：

誰かが良い画像のスライドショーを作る方法を教えてくれませんか

さて、私は最高のスライドショーについて知りません-誰かがお気に入りの既存のライブラリを宣伝するために介入すると確信していますが、例としてあなたが持っているコードを確かに改善することができます。

したがって、一連のオブジェクトを別々の番号付き変数に保持することは、通常、本当に必要なのは配列であることを示しています。

# List of image paths inside Images/
#
var paths= [
    'Foam2012/Misty.gif', 'Foam2012/Foamy.gif', 'Foam2012/17.gif', 'Foam2012/16.gif', 'Foam2012/2.gif',
    'Oxjam2012/Rainbow.gif', 'Oxjam2012/17.gif', 'Oxjam2012/9.gif', 'Oxjam2012/2.gif',
    'RagDay2012/GasMask.gif', 'RagDay2012/22.gif', 'RagDay2012/21.gif', 'RagDay2012/20.gif', 'RagDay2012/16.gif', 'RagDay2012/6.gif', 'RagDay2012/5.gif', 'RagDay2012/4.gif', 'RagDay2012/1.gif',
    'UV2012/17.gif', 'UV2012/14.gif', 'UV2012/9.gif', 'UV2012/7.gif', 'UV2012/6.gif',
];

# Preload images
#
var images= [];
for (var i= 0; i<paths.length; i++) {
    var image= new Image();
    image.src= 'Images/'+paths[i];
    images.push(image);
}

# Rotate image every 1.5s
#
var imagei= 0;
setInterval(function() {
    imagei= (imagei+1) % images.length;
    document.getElementById('SlideShow1').src= images[imagei].src;
}, 1500);

<img>これを改善するためにできることは他にもあります。たとえば、検索エンジンなどのJavaScript以外のエージェントにコンテンツが表示されるように、すべての画像をタグとしてページに含める方がよいでしょう。display次に、 CSSスタイルを使用してそれらを表示および非表示にできます。

または単に良いチュートリアルに私を導きますか？

それは問題です。私はしばらく探していませんが、標準は一般的に貧弱です。

私はjQueryのファンではありませんが、少なくともjQueryはより現代的な方法で記述される傾向があるため、jQueryを使用するチュートリアル資料のいくつかが役立つ場合があります。

于 2013-02-16T15:20:12.450 に答える
0

Internet Explorerドキュメントオブジェクトに「画像」プロパティがないブラウザがある可能性があるため、テストではスライドショーが機能するかどうかを確認するだけです。次のようなテスト：

if (!something.property_name)

JavaScriptでは、オブジェクトに特定の名前のプロパティがあるかどうかをテストする（状況によっては少し危険です）方法です。この場合、リスクはありません。ドキュメントオブジェクトに「images」プロパティがある場合、それはドキュメント内の画像（<img>DOM要素）のリスト（おそらく空）になります。プロパティが存在しない場合、そのテストはを返しtrueます。

（編集—ドキュメントにはスキップされていますが、IEにはプロパティがあります。）

ここでのコンセンサスは、それをテストする価値がないということです。また、あなたが本当に欲しいのは、ページ上のすべての画像をカバーするスライドショーであるかどうかを検討するかもしれないと思います。それは現実的ではないように私には思えます。実際のページには、アイコン、見出し、ロゴ、ウィジェットなどの画像があります。あなたのような目的で関心のある画像を見つけるためのより良いAPIがあります。

于 2013-02-16T14:41:36.020 に答える
0 
if (!document.images)

ドキュメントに存在するかどうかをテストimagesします（nullではない）。

  • ブラウザが異なれば、属性の名前も異なります
  • ページに画像がない可能性があります

属性の存在をテストする理由document.imagesはないようです：http ：//www.w3schools.com/jsref/coll_doc_images.asp

于 2013-02-16T14:41:37.747 に答える