Следующая/Предыдущая кнопка в Галерее изображений

Прямо сейчас у меня есть галерея изображений, которая меняет изображения, когда пользователь нажимает на уменьшенное изображение, соответствующий стиль div меняется на блокировку, а остальные скрыты. Я хочу, чтобы добавить дополнительные/предыдущие кнопки для дополнительной навигации.Следующая/Предыдущая кнопка в Галерее изображений

Моей мыслью было использовать getElementByAttribute, чтобы найти единственное изображение с дисплеем 'style = ": block"', а затем каким-то образом добавить/вычесть его в div. Но я боюсь, что я в недоумении. Любой совет?

Текущий код:

<div id="image1" style="display:block"><img src="resources/images/larges/01.jpg"></div> 
<div id="image2" style="display:none"><img src="resources/images/larges/02.jpg"></div> 
. . . 

<img style='cursor:pointer;' onclick="showDiv(1)" src="resources/images/thumbs/01.jpg"> 
<img style='cursor:pointer;' onclick="showDiv(2)" src="resources/images/thumbs/02.jpg"> 
. . . 

<script type = "text/javascript">  
    function showDiv(which) { 
    for(i = 0; i < 13; i++) { 
     document.getElementById("image"+i).style.display="none"; 
    } 
     document.getElementById("image" + which).style.display = "block"; 
    } 
</script>

источник

2012-02-21 ENev

вы можете объявить глобальную переменную

var currentImage = 1; //assuming the 1st image shown is always the first

затем добавить две кнопки,

<button type="button" onclick="showDiv(currentImage - 1)">Previous</button> 
<button type="button" onclick="showDiv(currentImage + 1)">Next</button>

на вашей функции вы обновляете currentImage с заданных парами

function showDiv(which) { 
    for(i = 0; i < 13; i++) { 
     document.getElementById("image"+i).style.display="none"; 
    } 
    //in the next 2 lines, you make sure which isn't lower than 1, and isn't greater than the number of images 
    if(which < 1) which = 1; 
    if(which > 13) which = 13; 
    document.getElementById("image" + which).style.display = "block"; 
    currentImage = which; 
}

источник

2012-02-21 22:23:52

Хмммм, если я не пропущу что-то, я не думаю, что этот будет работать. Мой атрибут «onclick» должен снабжать функцию целым числом. – ENev

Извините, я не «закодировал» раздел html –

Это делает БОЛЬШЕ больше смысла. Спасибо чувак! – ENev

В вашем JavaScript, объявить глобальную переменную i, который означает, который ДИВ в настоящее время видно (в коде выше, например, это «imagei»). Когда пользователь нажимает на миниатюру div image4, скажем, устанавливает i в 4 и так далее.

Теперь для кнопок предыдущего/следующего вы уже знаете текущее значение i, чтобы вы знали, какой div отображается. Увеличение или уменьшение i теперь, чтобы показать следующий div в последовательности.

И если вы хотите использовать только один div, here's a blog post, где вы можете скопировать весь код javascript для галереи, включая следующие/предыдущие кнопки.

источник

2012-02-21 22:22:10

Я не уверен, как мой скрипт знает, какой из них виден. Любые предложения по функции? – ENev

Второе предложение моего ответа говорит вам, как это сделать. –

Почему разве вы не используете только один div для отображения большого? (Это с поддержкой jQuery)

Идея состоит в том, чтобы изменить только изображение, которое вы хотите отобразить, а не просто скрыть другие. Вы можете сохранить фактический как атрибут для следующей кнопки (допускается, если они начинаются с Data-)

<div style="display:block"><img id="largeimg" data-nr="1" src="resources/images/larges/01.jpg"></div> 
<img data-nr="1" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/01.jpg"> 
<img data-nr="2" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/02.jpg"> 
. . . 

<script type = "text/javascript">  
    $(document).ready(function(){ 
    $(".clickable").each(function({ 
     this.click(function(){ 
     $("#largeimg").attr("src",this.attr("src")).attr("data-nr",this.attr("data-nr")); 
     } 
    } 
    }); 
    function nextpic() { 
    newid = parseInt($("#largeimg").attr("data-nr"))+1; 
    newsrc = $(".clickable[data-nr="+newid+"]").attr("src"); 
    $("#largeimg").attr("src",newsrc).attr("data-nr",newid); 
    } 
</script>

EDIT: Потому что он сказал, что это должно быть видео тоже: http://jsfiddle.net/x6W8m/ не является совершенным, но должен показать немного :)

источник

2012-02-21 22:24:20 Neysor

Я бы хотел, чтобы один из моих divs был тегом

О, ладно, работает почти равным! Скоро опубликует, нужно еще некоторое время :) – Neysor

но jQuery в порядке[email protected] – Neysor

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Next and Previous Button</title> 
    <link rel="stylesheet" href=""> 
</head> 
<body> 

<img src="images.jpg" id="imgDemo" alt="HTML5 Icon" width="128" height="128"> 

       <button onclick="nxt()" id="btnOne">next</button> 
       <button onclick="prvs()" id="btnTwo">previous</button> 

<script> 

var img = new Array("images.jpg","images1.jpg","images2.jpg","images3.jpg","images4.jpg","images5.jpg","images6.jpg","images7.jpg","images8.jpg"); 

var imgElement = document.getElementById("imgDemo"); 
var i = 0; 
var imgLen = img.length; 

     function nxt() 
     { 
      if(i < imgLen-1) 
       { 
        i++; 
       } 
      else{ 
        i=0;     
       } 

       imgElement.src = img[i];      
     } 

     function prvs() 
     { 
      if(i > 0) 
       { 
        i--; 
       } 
      else 
      { 
       i = imgLen-1; 
      } 
       imgElement.src = img[i];      
     } 

</script> 

</body> 
</html>

источник

2015-03-02 03:25:09 bvmCoder

Следующая/Предыдущая кнопка в Галерее изображений

ответ

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