簡體   English   中英

JavaScript幻燈片數組問題

[英]Javascript slideshow array issue

我對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> 
  1. 你在這里有奇怪的變量聲明

    var =圖片= [];

  2. 你也需要移動這部分

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

    之前

     if (images.length > 0) { $(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />'); startSlide(); } 
  3. 您在這里使用了錯誤的變量名(MyImages)

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

首先嘗試調試您的代碼

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM