Javascriptのスライドショーの配列の問題

私はJavascriptにかなり新しく、今自分でスライドショーを作成しようとしています。私は私の写真をどこから取得する配列を構築した後、私は今すぐ立ち往生した。白い画面しか表示されません。Javascriptのスライドショーの配列の問題

私のJavascriptの

$(function() { 
var counter = 0; 
var defaultSettings = { 
    "sliderContainer": "#slider" 
    , "pauseWithMouse": true 
    , "sliderSpeed": 2000 
    , "transitionSpeed": 1500 
}; 

function cycleImages() { 
    counter++; 
if (counter >= images.Length) { 
    counter = 0; 
} 
document.getElementById("#slider img").src = MyImages[counter]; 

var images = $('#slider img') 
    , now = images.filter(':visible') 
    , next = now.next().length ? now.next() : images.first() 
    , speed = 1500; //Transition speed 
now.fadeOut(speed); 
next.fadeIn(speed); 
} 

var theInterval; // Slide speed 

var = images = []; 
// if myImages exists then 
images = myImages; 
if (images.length > 0) { 
    $(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />'); 
    startSlide(); 
} 
var startSlide = function() { 
    setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval 
}; 
var stopSlide = function() { 
    if (defaultSettings.pauseWithMouse) { 
     clearInterval(theInterval); 
    } 
}; 
startSlide(); 
$('#slider img').on('mouseover', function() { 
    stopSlide(); 
}); 
$('#slider img').on('mouseout', function() { 
    startSlide(); 
}); 
});

そして、私のHTMLは：

<!DOCTYPE html> 
<html > 
<head> 
<meta charset="UTF-8"> 
<title>Javascript Slider</title> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="js/slideshow.js"></script> 

<script> 
    var myImages = ["slide1.jpg", "slide2.jpg", "bg/slide3.jpg"]; 
</script> 
</head> 

<body> 
<main> 
<div id="slider"> 
</div> 
</main> 
</body> 
</html>

出典

2017-06-08 Romeo Immanuel

コードを実行するためにフィドルやサンプルを提供できますか？ – oguzhancerit

yes：https://jsfiddle.net/xr6sfdyj/ –

これはあなたの問題だが、 'var images = $（ '＃slider img'）'を宣言してから、4行後に 'var images = [] 'それをすることを意味しましたか？ここで明白なことを指摘すると、 'var = images = []'を 'var images = []'に変更します。 – jdmdevdotnet

あなたがここに変数

VARの奇妙な宣言を持っている=イメージ= [];

はまた、あなたがこの部分に移動する必要が

var startSlide = function() { 
    setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval 
};

前に、あなたはここに

document.getElementById("#slider img").src = MyImages[counter];

最初の試みに間違った変数名（MyImages）を持っている

if (images.length > 0) { 
    $(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />'); 
    startSlide(); 
}

コードをデバッグする

出典

2017-06-08 14:08:05

OPには2つのvarという名前の 'images'があるので、私たちの誰も見ることはできません。コードのどの部分でもvarが参照しようとしていることはわかりません。コードには数多くの問題があります.2つの 'images'問題を修正する前に、コードの残りの部分を修正する方法は考えられません。 – jdmdevdotnet

最初のvar画像は関数内にあります著者はF12を押してコンソールでエラーを確認できます –

コンソール：Uncaught TypeError：CycleImagesで未定義のプロパティ 'Length'を読み取ることができません。cycleImages関数内で –

Javascriptのスライドショーの配列の問題

答えて

関連する問題