Question

单击按钮时，我想要旋转3张图像。

image1，image2，image3。

如果图像位于image1，则单击时应显示image2（依此类推，按image1，..，image3的顺序）。

当我在image3时，它应该隐藏图像，即不显示它。

我需要一些javascript函数的帮助才能做到这一点，我已经有了按钮点击事件的代码。

我传递了jquery对象$('myImageID');

的toggle（）函数

$(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>我的形象在哪里。

是否有背景属性来获取当前显示的图像名称？

Answer 1

您可以通过.css(name) method：

访问背景图片来获取背景图片

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

如果不以数组或其他方式管理您的图像列表，您将需要检查每个背景图像以了解何时隐藏元素。这不是一种很好的工作方式，因为它不允许您在将来轻松添加新图像。

可能类似以下内容：

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

Answer 2

您是否必须使用背景图像？
如果没有，这里有一些我会做的代码示例。

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

Answer 3

这是有用的。
每个叠加层最初都用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>

风格

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);
    });
});

Answer 4

回应Bendeway上面的回答，你需要在

之前插入

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

以下一行：

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

这会在所有图像开始旋转之前隐藏它们。

旋转图像，如果最后一张图像则隐藏

4 个答案: