通过单击更改图像和文本位

Question

我正在使用脚本来更改用户单击 HTML 站点中的图像。该脚本很适合在没有菜单的情况下播放这种幻灯片。

但现在我希望（从设计的角度）在图像下方显示图像编号和一些图像描述，并且（当然）它们也应该在有人点击图像时发生变化。

这是我迄今为止用于更改图像的脚本。有人可以快速帮助我更改文本吗？理想情况下，它会从我定义的字符串变量列表中获取文本，或者它也可以从外部 TXT 文件等中读取文本。

这是我目前使用的代码！

     <div id="content">
     <img src= "testbild01.jpg" width="100%" height="auto" style="float:left" id="imageisabutton" />



        <script type="text/javascript">
        var images = ['testbild01.jpg', 'testbild02.jpg', 'testbild02.jpg'],
            i = 0;

        // preload
        for (var j=images.length; j--;) {
            var img = new Image();
            img.src = images[j];
        }

        // event handler
        document.getElementById('imageisabutton').addEventListener('click', function() {
            this.src = images[i >= images.length - 1 ? i = 0 : ++i];
        }, false);
    </script> 

Answer 1

添加另一个数组进行描述，如

var descriptions = ['description 1', 'description 2', 'description 3'],

为描述添加新元素，在图片下方，如

<div id="mydescription"></div>

在this.src = ...之后添加如下代码

document.getElementById('mydescription').innerHTML = i + ' ' + descriptions[i];

Answer 2

这样就可以了！谢谢

     <div id="content">

     <center> 
     <c id='numbers'>image 1/3</c>
     <br />


     <img src= "testbild01.jpg" width="100%" height="auto" style="float:left" id="myButton" />

     <script type="text/javascript">

    var images = [
    'testbild01.jpg',
    'testbild02.jpg',
    'testbild03.jpg'
    ],
    i = 0;

    var mydescriptions = [
    'text 1, 
    'text 2, 
    'text 2'
    ],
    i = 0;


    // preload
    for (var j=images.length; j--;) {
        var img = new Image();
        img.src = images[j];
    }

    // event handler
    document.getElementById('myButton').addEventListener('click', function() {
        this.src =              
        images[i >= images.length - 1 ? i = 0 : ++i];

    document.getElementById('mydescriptions').innerHTML =  mydescriptions[i];
    document.getElementById('numbers').innerHTML = 'image ' + (i+1) + '/' + (j+4);

    }, false);                                          


     </script> 

     <br />
     <c id='mydescriptions'>click image to move through slideshow</c>

     </center>