Question

我正在尝试使用此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>

Answer 1

Checkout 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;
}

<强> JS

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));
}

使用按钮ID创建Javascript幻灯片

1 个答案: