Показать сообщение отдельно
  #14 (permalink)  
Старый 04.10.2017, 16:36
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Немного позаимствовал у рони
<style>
   li { display:inline }
   .active img{ border:1px solid red }
   div { width:700px;
           overlay:hide
   }
</style>
<div>
<ol>
   <li><img src="http://ingraf.su/wp-content/uploads/adecco.jpg" alt="Adecco" class="img-responsive"></li>
   <li class='active'><img src="http://ingraf.su/wp-content/uploads/Rambler.jpg" alt="Rambler" class="img-responsive"></li>
   <li><img src="http://ingraf.su/wp-content/uploads/bel.jpg" alt="Белая птица" class="img-responsive"></li>
   <li><img src="http://ingraf.su/wp-content/uploads/Rusbiteh.jpg" alt="Русбитех" class="img-responsive"></li>
   <li>
              <img src="http://ingraf.su/wp-content/uploads/Tryohgornaya-manufaktura.jpg" alt="Трёхгорная мануфактура" class="img-responsive">
            </li>						
   <li>
              <img src="http://ingraf.su/wp-content/uploads/Moskabelmet.jpg" alt="Москабельмет" class="img-responsive">
            </li>						
   <li>
              <img src="http://ingraf.su/wp-content/uploads/Asteros.jpg" alt="Астерос" class="img-responsive">
            </li>						
   <li>
              <img src="http://ingraf.su/wp-content/uploads/Subaru.jpg" alt="Subaru" class="img-responsive">
            </li>						
    <li>
              <img src="http://ingraf.su/wp-content/uploads/Nestle.jpg" alt="Nestle Waters" class="img-responsive">
    </li>
</ol>
</div>
<script>

  document.querySelector("ol").onclick = function(e){
    var lis = document.querySelectorAll('li');
     var target = event.target;
     if (target = target.closest("li")) {
        var selected = [].indexOf.call(lis,  target ) ;
        if(selected != 1) {
           curr = selected ? selected - 1: lis.length - 1;
           var innerOl = "<li>" + lis[curr].innerHTML + "</li>\n<li class='active'>" + lis[selected].innerHTML + "</li>\n";
          curr++;
          for(var i = 2;i <lis.length;i++) { 
              curr++;
              if(curr >= lis.length) { if(selected==0) curr = 1;
                else curr =0;
              }
              innerOl += "<li>" + lis[curr].innerHTML + "</li>\n";
          }
          this.innerHTML = innerOl;     
      }
   }
};
</script>

Последний раз редактировалось Dilettante_Pro, 04.10.2017 в 18:07.
Ответить с цитированием