Question

我的目标是制作幻灯片。我这里只有1张图片，并计划稍后使用。

<!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
<head>
<title> Slides </title>
<meta charset='utf-8'>
<style>

 table{
 margin: 1.5in;
 }

.arrow{
 color: blue;
 cursor: pointer;
 }

我尝试将图像类设为640 x 540像素，水平和垂直居中。我想避免内部填充。不确定它是否正确。

.img{
 height: 540px;
 width: 640px;
 position: relative;
 }

对于图像元素本身，我没有边距，是100％宽，有一个1像素的纯黑色边框。

 #image{
 width: 100%;
 border: solid 1px;
 border-color: black;
 }
</style>
<script>

我想制作2个全局变量，＆＃34;图像＆＃34;和＆＃34; imgidx＆＃34;。 -images - 一个数组，用images作为字符串填充images目录中的图像路径。

-imgidx - 最初设置为0的数字。

接下来我想填写以下功能。

- 增加或减少imgidx。

- 设置＆＃39; src＆＃39; img元素的属性（由id＆＃39; img＆＃39;标识）到图像[imgidx]的图像。如果imgidx是>图像阵列中的图像数量应该回归到零。如果它低于零，则应将其设置为小于数组的长度。

function previmg() {
}
function nextimg() {
}
</script>
</head>
<body>
<table>
<tr>
<!-- Clicking on the arrows should change the image being displayed: -->
<td class='arrow' onclick='previmg();'> &#171;
<td class='image'><img id='img' src='https://img-9gag-fun.9cache.com/photo/appxzbM_460s.jpg'>
<td class='arrow' onclick='nextimg();'> &#187;
</table>
</body>
</html>

Answer 1

只需根据您点击的方向更改img src，使用图像索引指示src应指向的位置。

var images = ['http://placehold.it/300x150?text=Image1', 'http://placehold.it/300x150?text=Image2', 'http://placehold.it/300x150?text=Image3'];

var index = 0;

var the_image = document.getElementById("main-image");
the_image.src = images[0];

function show_image(direction)
{
  if (direction == "left")
  {
    index--;
  }
  else
  {
    index++;
    index %= images.length;
  }
  
  if (index < 0)
  {
    index = images.length - 1;
  }
  
  the_image.src = images[index];
}

<div>
  <button onclick="show_image('left')">&lt;</button>
  <button onclick="show_image('right')">&gt;</button>
</div>

<div>
  <img id="main-image" />
</div>

Answer 2

我猜你增量的变量是imgidx，那么你应该使用这个计算：

分组

imgidx -= 1;
imgidx %= images.length;

下

imgidx += 1;
imgidx %= images.length;

以下是一些如何运作的例子：

//imgidx is 9, images.length is 10
//user click on next
imgidx += 1;//here imgidx is 10
imgidx %= images.length;//10%10 is 0, back to zero \o/

``

//img idx is 0, images.length is 10
//user click on prev
imgidx -= 1;//here imgidx is -1
imgidx %= images.length;//-1%10 is -1
imgidx+=(imgidx < 0)?images.length:0;//-1 + 10 = 9, the "last" image

Answer 3

我根据您的需要做了一个小幻灯片演示！

也许我可以帮助你..按钮不能正常工作但是已预先配置好了！

$('.arrowLeft').on('click', function (){
  // your code goes here
});

$('.arrowRight').on('click', function (){
 // your code goes here
});

.arrowLeft{
  z-index: 100;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 10%;
  background-color: red;
}

.arrowRight{
  z-index: 100;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  right: 10%;
  background-color: red;
}

.arrow {
  color: blue;
  cursor: pointer;
}

.img {
  height: 540px;
  width: 640px;
  position: relative;
}

img {
  position: fixed;
  top: 0%;
  left: 20%;
  width: 60%;
  border: solid 1px;
  border-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <div class='arrowLeft'></div>
    <div class='arrowRight'></div>
    <td class='image'>
      <img id='img-3' src='http://placehold.it/200x200?text=Slide3' />
    </td>
    <td class='image'>
      <img id='img-2' src='http://placehold.it/200x200?text=Slide2' />
    </td>
    <td class='image'>
      <img id='img-1' src='http://placehold.it/200x200?text=Slide1' />
    </td>
  </tr>
</table>

使用数组Javascript制作幻灯片

3 个答案: