Question

我正在尝试使用javascript创建幻灯片放映，但是我给出了错误，因为VM271＆＃34;索引：21未捕获的ReferenceError：未定义changeimage 在HTMLAnchorElement.onclick（VM271索引：21） onclick @ VM271索引：21＆＃34;

我的index.html代码是

 <!DOCTYPE html>
<html>
    <head>
        <title>Slideshow</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">

        <div class="row">
            <div class="col-md-4" >
                <a href="#" onclick=""><img src="previous.png" class="mx-
auto d-block"></a>
            </div>
            <div class="col-md-4">
                <image src="iphone.jpg" id="slideshow">
            </div>
            <div class="col-md-4">
                <a href="#" onclick="changeimage()"><image src="forward.png" class="mx-auto d-block"></a>
                                                <script src="slideshow.js">

            </div>

        </div>
    </div>

</body>

我的javascript代码是

    var images=["iphone.jpg","samsung.jpg","sony.jpg"];
var count=0;

function changeimage(){
    document.getElementById("slideshow").src=images[count];
    count=count+1;

if (count>2){
    count=0;
    }
}
console.log(count);

Answer 1

1）您可以在Web开发人员控制台中看到语法错误。如果你检查你应该看到你有一个带括号“（）”的if。

如果计数＆gt; 2.更新:(完成）

2）在关闭body标签之前加载滑块脚本。

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

3）在标签中添加一个id，并用jquery（你正在使用的）将它链接到处理程序：

<a id="btnChngImg" href="#"><image src="forward.png" class="mx-auto d-block"></a>

4）将您的脚本包裹起来，以便在页面加载后继续运行。

$(document).ready(function(){

    var images=["iphone.jpg","samsung.jpg","sony.jpg"];
    var count=0;

    function changeimage(){
       document.getElementById("slideshow").src=images[count];
       count=count+1;

       if (count>2){
          count=0;
      }
      console.log(count);
    };

    $("#btnChngImg").click(function(){
      changeimage(); 
    });

});

5）如果出现语法错误或文件未加载，请检查控制台。

Answer 2

Juan's code略有改进。模数的范围从0（数组中的第一个图像）到最后一个images.length - 1。 count = 1是为了不显示第一张图片两次。

var count=1;

function changeimage(){
   $("#slideshow").attr("src", images[count++ % images.length] );
}; 

$("#btnChngImg").click(function(){
  changeimage(); 
});

引用错误javascript，尝试创建幻灯片但不能正常工作

2 个答案: