1

以下のJavascriptコードを使用して単純な画像スライドショータイプのものを作成しようとしていますが、それが行っているのは、Webページの最初の画像を他のすべてとともに表示し、5秒後にページをクリアして同じ画像を表示し、次にすべてのページがもうクリアされないことを除いて、5 秒。

JavaScript:

var waiPics=new Array();
waiPics[0]='images/path.jpg';
waiPics[1]='images/gorse.jpg';
waiPics[2]='images/stream.jpg';
waiPics[3]='images/pines.jpg';
waiPics[4]='images/stump.jpg';

var time;

function timeUp() {
    delete document.write();
    nextPic();
}



function nextPic() {
    var picNum=0;
if (picNum = waiPics.length) {
    picNum=0;
}
else {
    picNum++;
} 
    document.write('<img src="'+waiPics[picNum]+'" title="Waipahihi" alt="Waipahihi">');
    time=setTimeout("timeUp()",5000);
}

HTML:

<script type="text/javascript">
<!-- Begin
nextPic();
//  End -->
</script>

私はJavascriptの経験があまりないので、助けてくれてありがとう。

4

3 に答える 3

0

この例を見てください...

http://jsfiddle.net/DaveAlger/eNxuJ/1/

独自のスライドショーを機能させるには、次の html をコピーして任意のテキスト ファイルに貼り付け、名前を付けて保存します。slides.html

<img>内に任意の数の要素を追加できます<div class="slideshow">

楽しい！

<html>
<body>
    <div class="slideshow">
        <img src="http://davealger.info/i/1.jpg" />
        <img src="http://davealger.info/i/2.bmp" />
        <img src="http://davealger.info/i/3.png" />
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function(){
            $('.slideshow img:gt(0)').hide();
            setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000);
        });
    </script>
    <style>
        .slideshow { position:relative; }
        .slideshow img { position:absolute; left:0; top:0; }
    </style>
</body>
</html>
于 2012-05-31T17:55:44.143 に答える
0

ここでは代入 ('=') の代わりに比較演算子 ('==') を使用する必要があります。

//if (picNum = waiPics.length) {
if (picNum == waiPics.length) {
于 2012-05-24T06:01:18.440 に答える
0

picNum は、関数内で宣言され、関数が呼び出されるたびにゼロに設定されるため、常にゼロになります。これを修正しても、あなたの状態は間違っています:

if (picNum = waiPics.length) {

条件は次のようにする必要があります。

if (picNum === waiPics.length) {

単一の = 記号は長さを picNum に割り当て、ブール値に変換します。配列の長さは非ゼロなので、真の値になります。その後、毎回ゼロにリセットされます。

JSLintを使用してコードのエラーをチェックし、改善を提案することを検討してください。問題にフラグを立てました：

"Expected a conditional expression and instead saw an assignment."
if (picNum = waiPics.length) {

実際、コードで JSLint を使用してその提案を調べた後、次のようなものを使用します。

// New array creation syntax
var waiPics = ['images/path.jpg', 'images/gorse.jpg', 'images/stream.jpg', 'images/pines.jpg', 'images/stump.jpg'];

var picNum = 0;  // Declare outside inner function so its value is preserved
var myDiv = document.getElementById("ssdiv");  // Get a div element to insert picture into

function nextPic() {
    if (picNum === waiPics.length) {    // Proper comparison
        picNum = 0;
    } else {
        picNum += 1;
    }

    // Set picture into div element without evil document.write
    myDiv.innerHTML = '<img src="' + waiPics[picNum] + '" title="Waipahihi" alt="Waipahihi">';

    // No longer need timeUp; also don't use eval syntax
    setTimeout(nextPic, 5000);
}

innerHTML を割り当てると、document.write に関するさまざまな問題が回避され、スライドショーの画像を変更するためにページを更新する必要もありません。他のコメントにも注意してください。

于 2012-05-24T05:58:56.773 に答える