使用按钮 ID 创建 Javascript 幻灯片答案

【问题标题】：Creating a Javascript Slideshow Using Button ID使用按钮 ID 创建 Javascript 幻灯片
【发布时间】：2015-12-10 17:05:21
【问题描述】：

我正在尝试使用此 HTML 创建带有 Javascript 的幻灯片。谢谢

    <body>  
    <button id="next"> <img src ="buttons/next.png"/> </button>

    <button id="back"> <img src = "buttons/back.png"/> </button>

    <div class="container">
    <div style="display: inline-block;">
    <img src="agctype.jpg"/></div>

    <div>
    <img src="America.jpg"/></div>

    <div>
    <img src= "sbjlogo2.jpg"/></div>
    </div>

【问题讨论】：

嗯，这说明你对 js 和 html 一无所知。我建议你在 google 中找到一个现有的 jQuery 幻灯片插件。它可以为您节省大量时间。
谢谢，我知道它是这样显示的。这是我的第一篇文章，也是我第一次尝试使用 JS 从头开始创建带有按钮的幻灯片。问题是……这个 HTML 看起来很丑陋，实际上创建了一个页面，该页面按我想要的方式布局。我没有发布 CSS 或我正在使用的现有 JS，只是因为...我通常在 Flash 中创建幻灯片，所以使用 JS 创建幻灯片会很棒。我为断断续续的代码道歉。

标签： javascript html slideshow dreamweaver imagebutton

【解决方案1】：

结帐 codepen.io ，我搜索了简单的幻灯片。这个看起来很适合初学者http://codepen.io/jonny_roller/pen/MaNGwV

HTML

A Simple Slideshow

<div class="slideshow" onmouseover="showControls(this)" onmouseout="hideControls(this)">
  <div class="controls hidden">
    <a id="previous" href="" onclick="return slideshowPrevious()">&#8249;</a>
    <a id="play" class="hidden" href="" onclick="return slideshowPlay()">&#8882;</a>
    <a id="pause" href="" onclick="return slideshowPause()">||</a>
    <a id="next" href="" onclick="return slideshowNext()">&#8250;</a>
  </div>

<div id="slide1" class="slide display" style="background-image: url(http://lorempixel.com/400/200/sports/1/)">
  <span>Cricket: Some text goes here</span>
</div>

<div id="slide2" class="slide" style="background-image: url(http://lorempixel.com/400/200/sports/2/)">
  <span>Surfing: Some more text appears here</span>
</div>

<div id="slide3" class="slide" style="background-image: url(http://lorempixel.com/400/200/sports/3/)">
  <span>Cycling: This is the text for the final slide... it's a bit longer</span>
</div>

</div>

Some text at the bottom

CSS

body {
  font-family: Verdana;
}

.slideshow {
  position: relative;
  width: 400px;
  height: 200px;
}

.controls a {
  z-index: 10;
  color: #fff;
  position: absolute;
  font-size: 30px;
  text-decoration: none;
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: rgba(0,0,0,0.2);
  border-radius: 20px;
}

#previous {
  top: 80px;
  left: 5px;
}

#next {
  top: 80px;
  right: 5px;
}

#play, #pause {
  top: 80px;
  left: 180px;
  text-align: center;
  display: block;
}

#pause {
  font-size: 20px;
  line-height: 34px;
}

#play {
  line-height: 34px;
}

.slide {
  width: 100%;
  padding-bottom: 50%;  /* 200/400 */

  position: absolute;
  top: 0;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;

  transition: opacity 0.5s ease;
  opacity: 0;
}

.slide span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 5px;
}

.display {
  opacity: 1;
}

.hidden {
  display: none !important;
}

var delay=3;

var slides=document.getElementsByClassName('slide').length;
var current=1;
var timer = setTimeout(nextSlide, delay*1000);

function nextSlide() {
  var next = (current == slides ? 1 : current + 1);
  $('slide' + current).classList.remove('display');
  $('slide' + next).classList.add('display');

  current = next;
  timer = setTimeout(nextSlide, delay*1000);
}

function slideshowNext() {
  slideshowPause();

  var next = (current == slides ? 1 : current + 1);
  $('slide' + current).classList.remove('display');
  $('slide' + next).classList.add('display');
  current = next;

  return(false);
}

function slideshowPrevious() {
  slideshowPause();

  var prev = (current == 1 ? slides : current - 1);
  $('slide' + current).classList.remove('display');
  $('slide' + prev).classList.add('display');
  current = prev;

  return(false);
}

function slideshowPause() {
  clearTimeout(timer);
  timer = false;
  $('pause').classList.add('hidden');
  $('play').classList.remove('hidden');
  return(false);
}

function slideshowPlay() {
  $('pause').classList.remove('hidden');
  $('play').classList.add('hidden');
  nextSlide();
  return(false);
}

function showControls(slideshow) {
  slideshow.children[0].classList.remove('hidden');
}

function hideControls(slideshow) {
  if (timer) {
    slideshow.children[0].classList.add('hidden');
  }
}

function $(id) {
  return(document.getElementById(id));
}

【讨论】：

这最终奏效了吗？如果是，你会接受我的回答吗？