Question

我熟悉HTML / CSS但是对Javascript和jQuery世界不熟悉，所以我一直对这个问题感到难过。

我正试图淡出包含图像的当前div，然后淡入下一个直接的div，这里是example 。这将最终应用于Tumblr照片博客，因此我不能单独定位图像。

我尝试了几种不同的方法，下面的jQuery代码是我最接近的一个但它仍然会跳过div并卡住。
非常感谢所有帮助:)

的 HTML：

<div class="content">
    <div class="post"><img src="1.jpg" alt="1"></div>
    <div class="post"><img src="2.jpg" alt="2"></div>
    <div class="post"><img src="3.jpg" alt="3"></div>
</div>

的 CSS：

.post{
    position: absolute;
    width: 480px;
    height: auto;
    top: 120px;
    left: 50%;
    margin-left: -240px;
    display: none;
}

的 jQuery的：

$(document).ready(function(){

        $(document).keydown(function(e) {
            switch(e.which) {

                case 37: // left
                        $('.post').fadeOut().prev().fadeIn();
                break;

                case 39: // right
                        $('.post').fadeOut().next().fadeIn();                                   
                break;

             default: return; 
            }
             e.preventDefault(); 
        });

});

Answer 1

See a working demo here

您可以使用indexNum-- and indexNum++浏览图片。

div在箭头键上交叉淡入淡出

1 个答案: