Question

我在过去教过自己一个小小的javascript，比如2小时，所以请耐心等待。

我已经有了一个简单的代码，可用于网站的简单幻灯片演示。这是javascript（＆＃39;幻灯片＆＃39;类的不透明度为0，＆＃39;当前＆＃39;类的不透明度为1，以便只显示＆＃39;当前＆＃39;一个）：

<script>

var Slideshow = document.querySelectorAll('#slides .slide');
var Current = 0;
var Timer = setInterval(SlideMove,3000);

function SelectSlide(n) {
  SlideMove(Current = n);
}

function SlideMove(n) {
    Slideshow[Current].className = 'slide';
    Current = (Current+1)%Slideshow.length;
    Slideshow[Current].className = 'current slide';
}
</script>

使用CSS和HTML我在幻灯片下方排列了5个小方块，我希望每个方块对应于我在幻灯片中显示的5张照片中的一张，这样当它点击时，幻灯片显示移动到该图片并从该点继续自动幻灯片循环。

这是5个方格的HTML（每个方格的类是＆＃39;选择器＆＃39;）：

<div id="selectors">
  <span class="selector" onclick="SelectSlide(0)"></span> 
  <span class="selector" onclick="SelectSlide(1)"></span> 
  <span class="selector" onclick="SelectSlide(2)"></span> 
  <span class="selector" onclick="SelectSlide(3)"></span>
  <span class="selector" onclick="SelectSlide(4)"></span>
</div>

对于＆＃39; onclick＆＃39;部分，我以为我告诉它执行一个名为＆＃39; SelectSlide（n）＆＃39;的新Javascript函数，这是代码的这一部分：

function SelectSlide(n) {
  SlideMove(Current = n);
}

根据我在教程中看到的内容，我认为这将需要幻灯片的编号（n），并使用＆＃39; Current＆＃39;执行SlideMove功能。等于＆＃39; n＆＃39;。所以，我认为这只会让“当前”成为现实。重视正在选择的值，它只是从那一点开始幻灯片循环，但它根本不起作用。当我单击其中一个选择器框时，它会显示我想要选择的图像，但它不会隐藏前一个图像，整个事情看起来像一团糟。然后新选择的图像将随机消失。

我很确定这与自动幻灯片更改循环的算法有关，而且我没有隐藏上一张幻灯片，但我不知道该怎么做那。任何帮助，将不胜感激。

如果这个问题看起来太混乱或写得不好，请随时让我澄清一下。

Answer 1

使用您自己的javascript代码隐藏/显示display:none。

＆＃13;

var Slideshow = document.querySelectorAll('#slides .slide');
var Current = 0;
var Timer = setInterval(SlideMove,3000);

function SelectSlide(n) {
  SlideMove(Current = n);
}

function SlideMove(n) {
    Slideshow[Current].className = 'slide';
    Current = (Current+1)%Slideshow.length;
    Slideshow[Current].className = 'current slide';
}

＆＃13;

.slide{
  height:100px;
  display:none;
  background-size:100% 100%;
    background-size: 100% 100%;
    text-align: center;
    line-height: 0px;
    font-size: 0px;
    color: red;
}
.current{
  display:block;
}/*
.slide:nth-child(even){
  background:red;
}
.slide:nth-child(odd){
  background:green;
}*/

＆＃13;

<div id="slides">
  <span class="slide current" onclick="SelectSlide(0)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=ff0000&txtclr=ffffff&txt=1230x373&w=1230&h=373');">0</span> 
  <span class="slide" onclick="SelectSlide(1)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=00ff00&txtclr=ffffff&txt=1230x373&w=1230&h=373');">1</span> 
  <span class="slide" onclick="SelectSlide(2)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=0000ff&txtclr=ffffff&txt=1230x373&w=1230&h=373');">2</span> 
  <span class="slide" onclick="SelectSlide(3)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=ffff00&txtclr=ffffff&txt=1230x373&w=1230&h=373');">3</span>
  <span class="slide" onclick="SelectSlide(4)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=000000&txtclr=ffffff&txt=1230x373&w=1230&h=373');">4</span>
</div>

＆＃13;

如何为简单的javascript幻灯片添加简单的选择器栏？

1 个答案: