Question

html代码

<div class="up_arrow"></div>
<div class="content">
    <img src="image_one">
    <img src="image_two">
    <img src="image_three">
</div>
<div class="down_arrow"></div>

这里＆＃34; image_two＆＃34;和＆＃34; image_three＆＃34;是隐藏的。我想要的是，当我点击＆＃34; down_arrow＆＃34; div，＆＃34; image_one＆＃34;更改为＆＃34; image_two＆＃34;当我点击＆＃34; down_arrow＆＃34; div，＆＃34; image_two＆＃34;更改为＆＃34; image_three＆＃34;。

类似于＆＃34; up_arrow＆＃34;，图像从＆＃34; image_three＆＃34; to＆＃34; image_two＆＃34;就像一个图像滑块。有谁知道怎么做？

Answer 1

您可以为scrollTop元素

的.content属性设置动画

var gallery = $('.content'),
    height = gallery.height();

$('.arrow').on('click', function(){
    var up = $(this).is('.up_arrow');

    if (up) {
        gallery.animate({'scrollTop': '-=' + height});
    } else {
        gallery.animate({'scrollTop': '+=' + height});        
    }
});

http://jsfiddle.net/gaby/a2xmr1mn/

演示

注意：我已在箭头中添加了一个常用（ arrow ）类来进行样式设定/定位

Answer 2

您可以尝试这样的事情：

$('div.up_arrow').on('click', function() {
    var $actImg = $(this).siblings('div.content').find('img:visible');
    if(!$actImg.is(':first-child')) {
        $actImg.hide();
        $actImg.prev().show();
    }
});

请参阅this fiddle。

Answer 3

对于多样性，只是另一种方法：

$(".down_arrow").on("click", function ()
{
  var actImage = $("img:visible").index();
  var nextImage = (actImage + 1) < $("img").length ? actImage + 1 : 0;
  $("img:eq(" + actImage + ")").hide();
  $("img:eq(" + nextImage + ")").show();
});
$(".up_arrow").on("click", function ()
{
  var actImage = $("img:visible").index();
  var nextImage = actImage > 0 ? actImage - 1 : $("img").length - 1;
  $("img:eq(" + actImage + ")").hide();
  $("img:eq(" + nextImage + ")").show();
});

未请求，但在显示第一张图片时，点击up_arrow显示最后一张图片;显示最后一张图像时，单击down_arrow显示第一张图像。

Fiddle

如何使用jquery在div中上下滑动图像？

3 个答案: