Question

我有这个Javascript滑动图像脚本。它工作得很好，但是我希望以滑动效果的段落标记的形式添加文本，幻灯片中的每个图像都附有一个段落。怎么做？我的代码：

<script language="JavaScript">
var image = new Array("images/ref1.png", "images/ref2.png", 
                "images/bb.png", "images/windows.png")
                var imgNumber=1     
                var numberOfImg = image.length                  

                function previousImage(){
                  if(imgNumber > 1){
                    imgNumber--
                    }

                  else{
                    imgNumber = numberOfImg
                    }

                  document.slideImage.src = image[imgNumber-1]                              
                  }

                function nextImage(){
                  if(imgNumber < numberOfImg){
                    imgNumber++
                    }

                  else{
                    imgNumber = 1
                    }

                  document.slideImage.src = image[imgNumber-1]  
                  }

                if(document.images){                                       
                   var image1 = new Image()                                        
                   image1.src = "images/ref1.png"
                   var image2 = new Image()
                   image2.src = "images/ref2.png"
                   var image3 = new Image()
                   image3.src = "images/bb.png"
                   var image4 = new Image()
                   image4.src = "images/windows.png"
                   }
</script>
<table>
        <tr>
          <td><img src="images/ref1.png" name="slideImage"></td>
        </tr>
        <tr>
          <td><a href="JavaScript:previousImage()">
          <img src="" border="none"/>prev</a>
          </td>
          <td><a href="JavaScript:nextImage()">
          <img src="" border="none" />next</a>  
          </td>
        </tr>
</table>

谢谢

Answer 1

基本上你只需要添加一个元素来保存你的文本，一个包含要旋转的文本的数组，并添加一些JavaScript来进行更改。

这是 jsFiddle example 。

我在HTML中添加了一个ID为“text”的新段落元素，在JavaScript中我创建了一个数组来保存文本。文本会像使用此行的图像一样进行更改：document.getElementById('text').innerHTML = text[imgNumber - 1];。

<强>的JavaScript ：

var image = new Array("http://www.dummyimage.com/60x60/&text=1", "http://www.dummyimage.com/60x60/&text=2", "http://www.dummyimage.com/60x60/&text=3", "http://www.dummyimage.com/60x60/&text=4");
var text = new Array('one', 'two', 'three', 'four');
var imgNumber = 1;
var numberOfImg = image.length;

function previousImage() {
    if (imgNumber > 1) {
        imgNumber--;
    }
    else {
        imgNumber = numberOfImg;
    }
    document.slideImage.src = image[imgNumber - 1];
    document.getElementById('text').innerHTML = text[imgNumber - 1];
}
function nextImage() {
    if (imgNumber < numberOfImg) {
        imgNumber++;
    }
    else {
        imgNumber = 1;
    }
    document.slideImage.src = image[imgNumber - 1];
    document.getElementById('text').innerHTML = text[imgNumber - 1];
}
if (document.images) {
    var image1 = new Image();
    image1.src = "http://www.dummyimage.com/60x60/&text=1";
    var image2 = new Image();
    image2.src = "http://www.dummyimage.com/60x60/&text=2";
    var image3 = new Image();
    image3.src = "http://www.dummyimage.com/60x60/&text=3";
    var image4 = new Image();
    image4.src = "http://www.dummyimage.com/60x60/&text=4";
}

Javascript滑动图像 - 如何添加元素/类

1 个答案: