Создание слайд-шоу Javascript с использованием ID кнопки

Я пытаюсь создать слайд-шоу с Javascript, используя этот HTML-код. СпасибоСоздание слайд-шоу Javascript с использованием ID кнопки

<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>

источник

2015-12-10 Anonymous

ммм, это что вы ничего не знаете о js и html. Я предлагаю вам найти существующий плагин jQuery для слайд-шоу в google. Это может сэкономить вам много времени. –

Спасибо, и я знаю, как это выглядит. Это мой первый пост и моя первая попытка создать слайд-шоу с нуля, у которого есть кнопки, используя JS. Дело в том .... этот HTML, как уродливый, как кажется, фактически создает страницу, которая изложена, как я хочу. Я не размещал CSS или существующую JS, которую я использую, потому что ... Обычно я создаю слайд-шоу во Flash, поэтому создание с использованием JS было бы потрясающим. Приношу извинения за изменчивый код. –

Оформить заказ 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)); 
}

источник

2015-12-10 19:35:11

спасибо! Я очень рад попробовать это. опубликует результаты позже .... –

В итоге это работает. Если бы вы согласились с моим ответом? –

Создание слайд-шоу Javascript с использованием ID кнопки

ответ

Смежные вопросы