Question

我正在尝试创建一个使用外部JavaScript的图像幻灯片（以使我的HTML代码更清晰）。我知道代码的工作原理不是我的代码，但是我将其修改为与我合作。我设置我的img标签和脚本完全按照它的设计方式，但是当我显示网页时，图像永远不会改变，它会卡在第一个图像上。我不确定为什么会这样，因为这是我第一次在HTML中使用javascript。

HTML（仅限正文）：

<div style="padding: 10px;"> 
                <script src="slideshow.js"></script>
                <img src="image/slideshow/banner1.jpg" id="slide" class="body" alt="" />
            </div>

slideshow.js：

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "image/slideshow/banner1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "image/slideshow/banner2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "image/slideshow/banner3.jpg"


var step=0

function slideit(){
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<2)
  step++
 else
  step=0
 setTimeout("slideit()",2500)
}

slideit()

我从这里得到了代码：http://www.javascriptkit.com/howto/show2.shtml我不知道这是否有帮助。

Answer 1

将你的幻灯片.js放在你的html页面上的jQuery.js之后。

<script>jquery.js file</script>
<script>slideshow.js file</script>

如果它已经存在或者它不依赖于jQuery，那么请发送一个包含所有代码的jsfiddle

使用Javascript在HTML中实现幻灯片放映

1 个答案: