Поворот изображения, если последнее изображение затем скрыть - PullRequest
Новая
       6

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

0 голосов
/ 04 февраля 2009

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

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

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

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

Для этого мне нужна помощь с функцией 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" />

Обновление

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

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

Ответы [ 4 ]

2 голосов
/ 04 февраля 2009

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

<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>
2 голосов
/ 04 февраля 2009

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

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

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

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

function toggle(el) {
  var whenToHide = "background3.jpg";
  var currBackground = $(el).css("background-image");
  /* ...code... */
  if (currBackground == whenToHide) {
    $(el).remove();
  }
}
0 голосов
/ 24 ноября 2009

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

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

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

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

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

0 голосов
/ 04 февраля 2009

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

Разметка 

<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>

Style 

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

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

Сценарий 

$(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);
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...