Javascript-форум - Смена фото по нажатию кнопки

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Смена фото по нажатию кнопки (https://javascript.ru/forum/jquery/23311-smena-foto-po-nazhatiyu-knopki.html)

Смена фото по нажатию кнопки

Здравствуйте!
Недавно начал изучать Jquery, и столкнулся с проблемой реализации переключения фото.
Мне надо чтобы просто менялось фото(без эффектов и т.д.) путем нажатия кнопки вперед и назад(скриншот:

).
Фотографии находятся в div, пример как я пытался реализовать:

Код:

        <div id="homeimg" align="left">

 <img src="images/1.png"  />

 </div>

 <div id="homebtn"> 

 <img id="back" src="images/bgs/back.png" /><img id="next" src="images/bgs/next.png" />

 </div>

        <div id="imgs" align="left">

 <img src="images/1.png"  />

 <img src="images/2.png"  />

  <img src="images/3.png"/>

 </div>

JQuery:

Код:

$(document).ready( function() {

$('#imgs').hide(1);

  var path = $('#imgs img').attr('src');

        $('#back').click(function(){

          $('#homeimg').animate({opacity: 1},100,function(){

            $(this).html('<img src=' + path + ' />').find('img');

          });

          return false;

        });





}); // End of ready

Сделал пример чтобы показать саму суть работы подобных плагинов,
до двух кнопок уверен сможешь допилить сам. Перемотка назад, практически калька с перемотки вперёд,только вмеcто next юзай prev, и в проверке на отсутствие картинок (строка 28) ставь вместо первой картинки последнюю.

<!DOCTYPE HTML>
<html>
<body>   
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(function(){

     // скроем изображдения  в начале
     $("#imgs img").hide();         
     
     // выберем первое изображение как стартовое
     var select= $("#imgs img:eq(0)");
     
     //покажем первую картинку
     select.show();      

     // вместо кнопок использую само изобюражения
     $("#imgs img").click(function(){

         //скроем текущее изображение
         select.hide();

         //выберем следующее изображение
         select=select.next();

         //если следующего изображения нет (ну нету, кончились они :) ), тогда выберем вновь первое изображение
         if (select.attr("src")==undefined){select=$("#imgs img:eq(0)");};

         //покажем вновь выбранное изображение. 
         select.show();  
     });               
});    
</script>

<div  id="imgs" align="left">
  <img width="200px" src="http://img-fotki.yandex.ru/get/5013/78967976.57/0_822f5_e013c42f_XL"  />
  <img width="200px" src="http://demotivatorsblog.ru/uploads/www.demotivations.infon2p4qmmzm5mz.jpg"  />
  <img width="200px" src="http://www.radionetplus.ru/uploads/posts/1317536159_demotivatory__402.jpg"/> 
  <img width="200px" src="http://demotivatorbi.ru/s/t/big/tbc0oz3f60nk6.jpg"/>
  <img width="200px" src="http://s41.radikal.ru/i094/1005/4a/18e7f2b3f3c3.jpg"/>
  <img width="200px" src="http://kotomatrix.ru/images/lolz/2009/10/19/381110.jpg"/>
  <img width="200px" src="http://best-dem.ru/wp-content/uploads/2010/10/x_410f4ef9-%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F.jpg"/> 


 </div>


</body>
</html>

Спасибо большое, за такой понятный ответ!
Всё теперь понятно! Спасибо огромное!!!:)

Плиз Плиз ПлизПлиз

Подскажите пожалуйста как установить задержку при переключении изображения ?

Цитата:

Сообщение от fifovandrej560

как установить задержку при переключении изображения ?

Как вариант...

setTimeout(_ => {
   // тут твои действия
   alert('Сработало')
}, 2000)

Не совсем пойму куда его вставлять совсем новичок

<!DOCTYPE HTML>
02
<html>
03
<body>
04
<script src="http://code.jquery.com/jquery-latest.js"></script>
05
<script>
06

07
$(function(){
08

09
// скроем изображдения в начале
10
$("#imgs img").hide();
11

12
// выберем первое изображение как стартовое
13
var select= $("#imgs img:eq(0)");
14

15
//покажем первую картинку
16
select.show();
17

18
// вместо кнопок использую само изобюражения
19
$("#imgs img").click(function(){
20

21
//скроем текущее изображение
22
select.hide();
23

24
//выберем следующее изображение
25
select=select.next();
26

27
//если следующего изображения нет (ну нету, кончились они :) ), тогда выберем вновь первое изображение
28
if (select.attr("src")==undefined){select=$("#imgs img:eq(0)");};
29

30
//покажем вновь выбранное изображение.
31
select.show();
32
});
33
});
34
</script>
35

36
<div id="imgs" align="left">
37
<img width="200px" src="http://img-fotki.yandex.ru/get/5013/78967976.57/0_822f5_e013c42f_XL" />
38
<img width="200px" src="http://demotivatorsblog.ru/uploads/www.demotivations.infon2p4qmmzm5mz.jpg" />
39
<img width="200px" src="http://www.radionetplus.ru/uploads/posts/1317536159_demotivatory__402.jpg"/>
40
<img width="200px" src="http://demotivatorbi.ru/s/t/big/tbc0oz3f60nk6.jpg"/>
41
<img width="200px" src="http://s41.radikal.ru/i094/1005/4a/18e7f2b3f3c3.jpg"/>
42
<img width="200px" src="http://kotomatrix.ru/images/lolz/2009/10/19/381110.jpg"/>
43
<img width="200px" src="http://best-dem.ru/wp-content/uploads/2010/10/x_410f4ef9-%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F.jpg"/>
44

45

46
</div>
47

48

49
</body>
50
</html>

можите пожалуйста в этот код вставить

fifovandrej560,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Ребят помогите плиз, сделать что бы картинки не переключались мгнавено, а с задержкой 5 секунд

fifovandrej560,
нажать на картинку, подождать 5 сек.

<!DOCTYPE HTML>
<html>
<body>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function() {
            // скроем изображдения  в начале
            $("#imgs img").hide();
            // выберем первое изображение как стартовое
            var select = $("#imgs img:eq(0)");
            //покажем первую картинку
            select.show();
            // вместо кнопок использую само изобюражения
            $("#imgs img").click(function() {
                //скроем текущее изображение
                select.stop().delay(5000).hide(function() {
                    //выберем следующее изображение
                    select = select.next();
                    //если следующего изображения нет (ну нету, кончились они :) ), тогда выберем вновь первое изображение
                    if (select.attr("src") == undefined) {
                        select = $("#imgs img:eq(0)");
                    };
                    //покажем вновь выбранное изображение.
                    select.show();
                });
            });
        });
    </script>
    <div id="imgs" align="left">
        <img width="200px" src="https://loremflickr.com/170/350/dog,hound?random=1" />
        <img width="200px" src="https://loremflickr.com/170/350/dog,hound?random=2" />
        <img width="200px" src="https://loremflickr.com/170/350/dog,hound?random=3" />
        <img width="200px" src="https://loremflickr.com/170/350/dog,hound?random=4" />
        <img width="200px" src="https://loremflickr.com/170/350/dog,hound?random=5" />
        <img width="200px" src="https://loremflickr.com/170/350/dog,hound?random=6" />
        <img width="200px" src="https://loremflickr.com/170/350/dog,hound?random=7" />
    </div>
</body>
</html>