Question

<script type="text/javascript">


$(document).ready(function() {      

    //Execute the slideShow
    slideShow();

});

function slideShow() {

    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.2});


    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',5000);

}

function gallery() {

    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));   


    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 2.0}, 2500);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');




}

</script>


</head>
<body>

<div id="gallery">

    <a href="#" class="show">
        <image src="" alt="fig1" width="960" height="170" />
    </a>

    <a href="#">
        <image src="" alt="fig2" width="960" height="170" />
    </a>



</div>
</body>
</html>

任何人都可以帮我找到一种方法来制作这个滑块slideup（）和slidedown（）而不使用clickfunction？所以现在它只是淡入淡出，但是我想这样做，即下一个显示的图像向上滑动并推动前一个图像（到顶部）。非常感谢

Answer 1

我可以为你清理一下（快速和肮脏），但这通常是你想要做的吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">


$(document).ready(function() {      

    //Execute the slideShow
    slideShow();

});

function slideShow() {
    //Set the opacity of all images to 0

    $('#gallery a').css({opacity: 0.0}).show();

    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.2}).show();


    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',5000);

}

function move() {
    $('#gallery a:first').appendTo('#gallery');
}

function gallery() {

    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    //var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));   
    var next = current.next();

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show').show()
    .animate({opacity: 2.0}, 2500);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show').slideUp(500);
    setTimeout('move()', 1500);





}

</script>


</head>
<body>

<div id="gallery">

    <a id="t1" href="#" class="show">
        <image src="" alt="fig1" width="960" height="170" />
    </a>

    <a id="t2" href="#">
        <image src="" alt="fig2" width="960" height="170" />
    </a>



</div>
</body>
</html>

Answer 2

假设您的图库周围有一个包裹的元素，其中包含position:relative或absolute和overflow:hidden，并且其中的图片为position:absolute。

将下一张幻灯片定位为具有top到图库元素的高度。
为当前幻灯片设置动画，使top为 - 画廊的高度。
为下一张幻灯片设置动画以top 0

var galleryHeight = $('#gallery').height();
next.css('top',galleryHeight + 'px');
current.animate({top: -galleryHeight + 'px', opacity:0});
next.animate({top: 0 + 'px', opacity:1});

此外，不透明度从0变为1，因此使用1.2有点错误。

需要Jquery slideUp（）函数

2 个答案: