1

我在我的网站上有这个滑块，并且工作正常......它只是和图像转换器，它改变了幻灯片上的图像，它的代码写在 main.html 文件中是这样的

<img src="images/1.jpg" name="slide"  width="100%" height="368" />
<script>
<!--
    var image1=new Image()
    image1.src="images/1.jpg"
    var image2=new Image()
    image2.src="images/4.jpg"
    var image3=new Image()
    image3.src="images/3.jpg"

    //variable that will increment through the images
    var step=1
    function slideit(){
        //if browser does not support the image object, exit.
        if (!document.images)
            return
        document.images.slide.src=eval("image"+step+".src")
        if (step<3)
            step++
        else
            step=1
        //call function "slideit()" every 2.5 seconds
        setTimeout("slideit()",2500)
    }
    slideit()
//-->
</script>

现在它工作得很好.. 我想要的是我有一个文件名 page1.js 我想把我的 javascript 代码放在那个文件中而不是我的 main.html 文件中.. 请告诉我我是如何把这个 javascript 代码放进去的该 page1.js 文件并调用它，以便图像幻灯片可以正常工作，因为它现在可以在同一个文件中使用 javascript 代码..

4

2 回答 2

1

将您的 javascript 从上面放入一个名为 的文件my-slides.js中，然后将当前 HTML 文件中的脚本标记替换为这个：

<script type="text/javascript" src="my-slides.js"></script>

确保它my-slides.js与您的 HTML 文件位于同一文件夹中，否则相应地更改路径。

FWIW，虽然你没有在你的问题中提出这个问题，但我想我还应该提到以下几点：

  • 考虑使用花括号来定义if和块中的代码块else，即使它是单行。真正提高代码可读性
  • 这一行：document.images.slide.src=eval("image"+step+".src")使用eval，你应该避免它。我不确定通过用 eval 包装你的字符串连接来完成什么。我会将Images 存储在一个数组中，然后通过索引访问它。
  • setTimeout与其在函数内重复出现，不如考虑setInterval在函数外使用。

按照要求。

这是my-slides.js应该包含的内容。

    var numImages = 3;
    var images = [];
    for (var i = 0; i < numImages; ++i) {
        var image = new Image();
        image.src = 'images/' + (i + 1) + '.jpg';
        images.push(image);
    }

    var step = 0;
    function slideit() {
        if (! document.images) {
            return;
        }
        document.images.slide.src = images[step].src;
        step = (step + 1) % numImages;
    }
    setInterval(slideit, 2500);
于 2013-07-31T23:36:08.257 回答
0

您所要做的就是在您的页脚或页眉中包含您的 JS 文件：

<script src="js.js"></script>

然后在那个 JS 文件中将包含：

        var image1=new Image()
     image1.src="images/1.jpg"
     var image2=new Image()
     image2.src="images/4.jpg"
   var image3=new Image()
   image3.src="images/3.jpg"

   //variable that will increment through the images
       var step=1
       function slideit(){
 //if browser does not support the image object, exit.
  if (!document.images)
  return
  document.images.slide.src=eval("image"+step+".src")
  if (step<3)
  step++
  else
  step=1
  //call function "slideit()" every 2.5 seconds
  setTimeout("slideit()",2500)
  }
  slideit()

您唯一需要更改的是图像本身的路径，它们可以是相对于 JS 文件的路径，也可以是绝对路径。

于 2013-07-31T23:35:24.817 回答