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

像这样有效！ THX

     <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>

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

2 个答案: