Смена картинок при клике

@Jasta · Регистрация: 20.02.2016

Author24 — интернет-сервис помощи студентам

Доброго всем времени суток. У меня есть ряд небольших картинок, и те же самые картинки только побольше, где все кроме одной скрыты. Необходимо что бы при клике на определенную маленькую картинку, большая картинка сверху скрывалась, а на её месте появлялась одна из больших картинок (точно такая же как маленькая). Только начинаю разбираться в jQuery, поэтому не как не соображу, как это реализовать. Надеюсь я смог изложить идею более, менее понятно.
Вот HTML:

HTML5

<body>
  <img src="img/limp_bizkit.jpg">
  <img src="img/offspring.jpg" alt="" id="hid">
   <ul >
       <li ><img src="img/limp_bizkit.jpg" class="media" onclick="addEffect()" /></li>
       <li ><img src="img/offspring.jpg" class="media"/></li>
       <li > <img src="img/pink_floyd.jpg" class="media"/></li>
       <li ><img src="img/sex_pistols.jpg" class="media" /></li>
   </ul>
   <div id="kv1" >1</div>
   <button  onclick="addEffect1()">Эффект Show()</button>
</body>

CSS:

CSS

.media {
  
    width: 200px;
    height: 200px;
}
li {
    list-style: none;
     display: inline;
     
}
#hid {
   
    display:none;
    background: #000000;
    opacity: 0.1;
}

JavaScript:

Javascript

1
2
3

function addEffect(){
  $("#hid:hidden").show().animate({opacity: "1"} , 1000);
}

Добавлено через 2 часа 44 минуты
Нашел следующее решение: создать 4 отдельные функции для каждой из картинок, и вызывать их при клике на определённую картинку, а в самих функциях отбирать большие картинки по альту.
Вот так вот:

Javascript

function addEffect(){
 
  $("#hid:hidden").show().animate({opacity: "1"} , 1000);
      $("img[alt = 'limp']").hide(); 
}

HTML5

<body>
  <img src="img/limp_bizkit.jpg" alt="limp">
  <img src="img/offspring.jpg" id="hid" >
   <ul >
       <li ><img src="img/limp_bizkit.jpg" class="media" onclick="addEffect()"  /></li>
       <li ><img src="img/offspring.jpg" class="media"/></li>
       <li > <img src="img/pink_floyd.jpg" class="media"/></li>
       <li ><img src="img/sex_pistols.jpg" class="media" /></li>
   </ul>
 
</body>

Но это решение мне самому чертовски не нравится, это ужаснейший пример быдлокода, 4 разные функции решают одну задачу, а как сделать так что бы альт или id картинки определялся автоматически, при клике, пока придумать не могу.... Плиз подскажите.... Заранее всем благодарен.

@TikName · 05.02.2017, 19:10

Можно каждый раз выбирать следующий элемент... https://api.jquery.com/next/

@Jasta · 06.02.2017, 16:08 **[ТС]**

В итоге сделал вот так:

Javascript

function addEffect(){
 
  $("#off:hidden").show().animate({opacity: "1"} , 1000);
     $('.sow').removeClass('sow').addClass('kill');
      $("#off").addClass('sow');
      
      $("img[class = 'kill']").hide(); 
}
       
      function addEffect1(){
 
  $("#limp:hidden").show().animate({opacity: "1"} , 1000);
     $('.sow').removeClass('sow').addClass('kill');
      $("#limp").addClass('sow');
      
      $("img[class = 'kill']").hide(); 
}
        
        function addEffect2(){
 
  $("#pink:hidden").show().animate({opacity: "1"} , 1000);
     $('.sow').removeClass('sow').addClass('kill');
      $("#pink").addClass('sow');
      
      $("img[class = 'kill']").hide(); 
}
        function addEffect3(){
 
  $("#sex:hidden").show().animate({opacity: "1"} , 1000);
     $('.sow').removeClass('sow').addClass('kill');
      $("#sex").addClass('sow');
      
      $("img[class = 'kill']").hide(); 
}

HTML5

<body>
  <img src="img/limp_bizkit.jpg" alt="limp" class="sow" id="limp" />
  <img src="img/offspring.jpg" id="off" class="kill"/>
  <img src="img/pink_floyd.jpg" id="pink" class="kill"/>
  <img src="img/sex_pistols.jpg" class="kill" id="sex" />
   <ul >
       <li ><img src="img/limp_bizkit.jpg" class="media"  onclick="addEffect1()"  /></li>
       <li ><img src="img/offspring.jpg" onclick="addEffect()"   class="media"/></li>
       <li > <img src="img/pink_floyd.jpg" onclick="addEffect2()" class="media"/></li>
       <li ><img src="img/sex_pistols.jpg" onclick="addEffect3()" class="media" /></li>
   </ul>
 
</body>

CSS

.media {
  
    width: 200px;
    height: 200px;
}
li {
    list-style: none;
     display: inline;
     
}
.kill {
    display:none;
     opacity: 0.1;
}

В принципе все работает. Но сейчас следующая проблема. При показе слайда я сделал анимацию выцветания, но она срабатывает только при первом клике, при повторном клике по той же картинке она уже не работает. Подскажите плиз почему???

@TikName 9 / 9 / 6 Регистрация: 07.10.2013 Сообщений: 66
	05.02.2017, 19:10	2
	Можно каждый раз выбирать следующий элемент... https://api.jquery.com/next/ 0

	06.02.2017, 16:08