0

Не подскажите, пожалуйста, как можно так реализовать смену картинок без обновления страницы? Желательно при кликах на любую миниатюру (img2/3/4) она меняется местами с img1, но можно и просто замета большой картинки при клике на миниатюрную картинку снизу.

уот так уот

2 ответа 2

1

.block{  
  position: relative;
  text-align: center;
  max-width: 500px;
  margin: 25px auto;
  border: 1px solid #ccc;
}

[id^=s-]{
  display: none;
}
[id^=s-] + label{  
  margin-top: 310px;
  display: inline-block;
  vertical-align: top;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #ccc;
}
[id^=s-]:checked + label{
  background: #f00;
}
[id^=s-] + label ~ [id^=block-content-]{
   display: none;
   position: absolute; top: 0; left: 50%;
   margin-left: -150px;   
   width: 300px;
   height: 300px;   
   line-height: 300px;
   background: #ccc;
   font-size: 50px;
}
#s-1:checked + label ~ #block-content-1,
#s-2:checked + label ~ #block-content-2,
#s-3:checked + label ~ #block-content-3{
  display: block; 
}
#s-2:checked + label,
#s-2:checked + label ~ #block-content-2{
  background: #FF7F50;
}
#s-3:checked + label,
#s-3:checked + label ~ #block-content-3{
  background: #008B8B;
}
<div class="block">
  <input type="radio" name="s" id="s-1" checked />
  <label for="s-1">1</label>  
  <div id="block-content-1">1</div>
  
  <input type="radio" name="s" id="s-2" />
  <label for="s-2">2</label>  
  <div id="block-content-2">2</div>
  
  <input type="radio" name="s" id="s-3" />
  <label for="s-3">3</label>  
  <div id="block-content-3">3</div>  
</div>

1
0

Вы можете заменить картинку, например, с помощью:

 clickfunction() {
     d = new Date();
     $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
 }

Также подобная тема была на enSO.

Вот решение для вас: http://jsfiddle.net/nz8qy41y/9/

$('a').on('click', function(e){
    $('img').attr('src', $(this).attr('href'));
    e.preventDefault();
});
li {
    list-style: none;
    display: block;
    float: left;
}
a {
    display: block;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    margin: 5px;
    border: 1px solid blue;
}
<img src="http://i.stack.imgur.com/fWMVJ.jpg?s=128&g=1&g&s=16" />
<ul>
    <li><a href="http://i.stack.imgur.com/fWMVJ.jpg?s=128&g=1&g&s=16">1</a></li>
    <li><a href="http://is2.mzstatic.com/image/thumb/Purple7/v4/44/1a/5d/441a5d52-409a-083d-dfe7-dd51c43732ef/pr_source.png/100x100bb-85.jpg">2</a></li>
    <li><a href="http://img.scoop.it/ygxGkWUyk2twloZcnxTbnjl72eJkfbmt4t8yenImKBXEejxNn4ZJNZ2ss5Ku7Cxt">3</a></li>
    <li><a href="http://placekitten.com/g/350/300">4</a></li>
</ul>

1
  • И вам спасибо, но вы меня не так поняли! 29 фев 2016 в 14:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.