本文介绍了如何使用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向上和向下滑动图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-14 02:44