如何使用jquery向上和向下滑动图像？

问题描述

html code

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

此处隐藏image_two和image_three。我想要的是，当我点击down_arrowdiv时，image_one更改为image_two，而当我点击down_arrowdiv时，image_two更改为image_three。

同样对于up_arrow，图像从image_three变为image_two，就像图像滑块一样。有人知道如何做到这一点吗？

解决方案

您可以动画 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}）; 
} 
}）; 
  

演示

---

注意：我已将常用（ 箭头 ）类添加到样式/定位的箭头

html code

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

Here "image_two" and "image_three" are hidden. What I want is, when I click on "down_arrow" div, "image_one" changes to "image_two" and again when I click on "down_arrow" div, "image_two" changes to "image_three".

Similarly for "up_arrow", image changes from "image_three" to "image_two" just like an image slider. Does anyone know how to do it?

解决方案

You could animate the scrollTop property of the .content element

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

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

---

note: i have added a common (arrow) class to the arrows for styling/targeting

这篇关于如何使用jquery向上和向下滑动图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！