Поверните изображения, если последнее изображение, затем скройте

У меня есть 3 изображения, которые я хочу повернуть, когда нажимается кнопка.Поверните изображения, если последнее изображение, затем скройте

изображение1, изображение2, image3.

Если изображение находится на изображении1, тогда при нажатии он должен показывать изображение2 (и так далее, в порядке изображения1, .., изображение3).

Когда я нахожусь в image3, он должен скрыть изображение, т. Е. Не отображать его.

Мне нужна помощь с помощью функции javascript для этого, у меня уже есть код для события нажатия кнопки.

Я передаю функцию toggle() объект jquery $('myImageID');

$(document).ready(
    function() 
    { 

     $('#button1').click(function() { toggleSector($('#sector1')) } ;    

    } 
); 

function toggleSector(o) 
    {  
     // help! 
    } 

<div id="sector1"></div> 
<input type="button" id="button1" value="Sector 1" />

Update

я должен каким-то образом найти имя текущего фонового изображения, установленного на <div>, где мое изображение есть.

Есть ли свойство фона, чтобы получить отображаемое имя изображения?

источник

2009-02-04 Blankman

Вы можете получить фоновое изображение, доступ к нему из .css(name) method:

$("#sector1").css("background-image");

Без управления списком изображений в виде массива или каким-либо другим образом, вы будете иметь, чтобы проверить каждый background- чтобы узнать, когда пришло время скрыть свой элемент. Это не отличный способ работы, так как он не позволяет вам легко добавлять новый образ в будущем, если хотите.

Возможно, что-то вроде следующего:

function toggle(el) { 
    var whenToHide = "background3.jpg"; 
    var currBackground = $(el).css("background-image"); 
    /* ...code... */ 
    if (currBackground == whenToHide) { 
    $(el).remove(); 
    } 
}

источник

2009-02-04 15:04:12 Sampson

Вы должны использовать фоновое изображение?
Если нет, вот небольшой пример кода для того, что я буду делать.

<html> 
<head> 
<style type="text/css"> 
    #imageRotater { list-style-type:none; } 
    #imageRotater, .imageRotater li { margin:0px auto; padding: 0px; } 
    #imageRotater img { display:none; } 
</style> 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> 
<script type="text/javascript"> 
(function($) { 
    $.fn.rotate = function() { 
     return this.each(function() { 
      var list = $(this).is('ul') ? $(this) : $('ul', this); 
      list.find('img:eq(0)').show(); 

      $('img', list).click(function() { 
       $(this).hide().closest('li').next().find('img').show(); 
      }); 
     }); 
    }; 
})(jQuery); 


$(document).ready(function() { 
    $("#imageRotater").rotate(); 
}); 

</script> 

</head> 
<body> 
    <div id="sector1"> 
     <ul id="imageRotater"> 
      <li><img src="image1.png" alt="" /></li> 
      <li><img src="image2.png" alt="" /></li> 
      <li><img src="image3.png" alt="" /></li> 
     </ul> 
    </div> 
</body> 
</html>

источник

2009-02-04 15:20:56 bendewey

Это то, что работает.
Каждое наложение первоначально скрыто с помощью CSS. Каждый раз, когда вы нажимаете кнопку, все накладки скрыты, затем один отображается на основе некоторых данных, хранящихся на кнопке. Если данные достигают максимального количества наложений + 1, ни один из них не отображается, и данные сбрасываются на 0.

Markup

<div id="container" style="background: yellow"> 
    <div class="overlay" style="background: red"></div> 
    <div class="overlay" style="background: green"></div> 
    <div class="overlay" style="background: blue"></div> 
</div>

Стиль

div{ 
    width: 100px; 
    height: 100px; 

} 
.overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
} 
#container{ 
    position: relative; 
}

Script

$(function() { 
    var b = $('#button1'); 
    b.data('next', 0); 
    b.data('max', $('.overlay').size()+1); 
    b.click(function(e) { 
     var next = $(this).data('next'); 
     var o = $('.overlay'); 
     o.hide(); 
     o.eq(next).show(); 
     next = (next+1) % $(this).data('max'); 
     $(this).data('next', next); 
    }); 
});

источник

2009-02-04 16:13:12 meouw

В ответ на ответ Bendeway в выше, вам нужно вставить перед тем

list.find('img:eq(0)').show();

следующая строка:

list.find('img').hide();

Это скроет все изображения, прежде чем он начнет вращаться через них.

источник

2009-11-24 20:05:33 KyokoHunter

Поверните изображения, если последнее изображение, затем скройте

ответ

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