Javascript幻灯片阵列问题_Javascript_Jquery_Slideshow

Javascript幻灯片阵列问题

javascript jquery

Javascript幻灯片阵列问题,javascript,jquery,slideshow,Javascript,Jquery,Slideshow,我对Javascript非常陌生，现在我正在尝试自己制作幻灯片。只有当我建立了一个阵列，从中获取图片后，我才被卡住了。它只显示一个白色屏幕我的Javascript $(function () { var counter = 0; var defaultSettings = { "sliderContainer": "#slider" , "pauseWithMouse": true , "sliderSpeed": 2000 , "transitionSpee

我对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();
});
});

$（函数（）{
var计数器=0；
var defaultSettings={
“sliderContainer”：“#slider”
，“pauseWithMouse”：真
，“滑块速度”：2000
，“转换速度”：1500
};
函数cycleImages（）{
计数器++；
如果（计数器>=images.Length）{
计数器=0；
}
document.getElementById（“#slider img”）.src=MyImages[counter]；
变量图像=$（“#滑块img”）
，now=images.filter（“：visible”）
，next=now.next（）.length？now.next（）：images.first（）
，速度=1500；//转换速度
现在，淡出（速度）；
其次，fadeIn（速度）；
}
var theInterval；//滑动速度
var=images=[]；
//如果myImages存在，那么
图像=我的图像；
如果（images.length>0）{
$（defaultSettings.sliderContainer）.append（“”）；
startSlide（）；
}
var startSlide=函数（）{
setInterval（CycleImage、defaultSettings.sliderSpeed）；//设置间隔
};
var stopSlide=函数（）{
如果（默认设置。暂停鼠标）{
clearInterval（区间）；
}
};
startSlide（）；
$（'#slider img'）。on（'mouseover'，function（）{
止动滑块（）；
});
$（'#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>


Javascript滑块
var myImages=[“slide1.jpg”、“slide2.jpg”、“bg/slide3.jpg”]；

这里的变量声明很奇怪

var=images=[]

您还需要移动此部件

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

以前

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

首先尝试调试您的代码

您可以提供fiddle或sample来运行您的代码吗？是的：不确定这是否是您的问题，但是您声明了

var images=$（“#slider img”）

，然后像4行一样，您声明了

var images=[]

您打算这么做吗？在此指出显而易见的一点，将

var=images=[]

更改为

var-images=[]

是的，谢谢它现在显示了第一张图像，但仍然没有滑动。您没有提到我提出的最大一点。您有两个名为

图像的变量。我假设您需要不同的名称，如果不是，为什么要在4行之后覆盖它？你能把你的代码修改成不具有相同的变量名吗？这可能是你最大的问题，尽管我看到了很多。我们中的任何人都不可能回答，因为OP有两个变量名为images
，我们不知道他试图在代码的任何部分引用哪个变量。代码有很多问题，在他修复2images问题之前，我们不可能知道如何修复其余的代码。首先，var images是函数内部的，我认为它不会冲突，我认为作者可以按F12键，看看他在控制台中收到的错误是什么：Uncaught TypeError:Cannot read属性'Length'的undefined at CycleImagesin函数cycleImages您将获得尚未定义的可变图像的长度。如果您计划接收它，那么您需要像下面这样更改函数cycleImages（images）{然后您需要更改这个变量startSlide=function（images）{setInterval（cycleImages（images），defaultSettings.sliderSpeed）；//Set interval}；以及启动幻灯片的调用，但在此之后，我发现您将面临其他错误，因此请尝试修复代码错误。您需要花费一些时间
document.getElementById("#slider img").src = MyImages[counter];