Question

我是JavaScript的新手，并试图找出一个基于数组内置图片的基本幻灯片。就像你点击下一个和上一个获取新图像一样。

我该怎么做？这是我到目前为止所拥有的。

<html>
<body>

<script>

imgArray = new Array(
“image”,
“image”
“image”); 

x=1
y=2; 

function move{
y = y+xflip; 
if (y>x)
{y = 1;}
if (y==0)
{y = x; 
document.images[2].src = img[y-1];}

</script>

<input type=“button” value=“Prev” name=“buttonp” onclick=“slide(-1)”>
<input type=“button” value=“Next” name=buttonb” onclock=“slide(1)”>

<img src=“image1”>

</body>
</html>

请帮忙。感谢。

Answer 1

我喜欢jquery方法。你可以尝试这样的事情。你需要添加一些额外的逻辑来点击先前的等等。

<button id=“buttonprev” type="button">Previous</button>
<button id=buttonforward”>Next</button>

<img id="preview" src="#" alt="your image" />

<script>
    var imgArray = ['image1.png', 'image2.png', 'image3.png'];
    var imgCount = 0;

    $("#buttonforward").on('click', function(event) {
      imgCount += 1;
      $('#preview').attr('src', imgArray[imgCount]);
    });

    $("#buttonprev").on('click', function(event) {
      imgCount -= 1;
      $('#preview').attr('src', imgArray[imgCount]);
    });
</script>

将图像放在具有下一个前一个按钮的简单并行阵列中

1 个答案: