Anirban Anirban - 3 months ago 7
HTML Question

Automatic change image up to down on time

I need this code without clicking function. I need it with normal slideshow against time.

I mean image will change after 5 sec automatically.



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

.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow up_arrow">UP</div>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>
<div class="arrow down_arrow">DOWN</div>




Answer

Like this?

var gallery = $('.content'),
    height = gallery.height(),
    scrollHeight = gallery[0].scrollHeight,
    y = 0;

$(function() {
  setInterval(function() {
    y += height;
    if( y >= scrollHeight ) {
      y = 0;
    }
    gallery.animate({'scrollTop':  y });
  }, 2000);
});
.content{
    width:400px;
    height:300px;
    overflow:hidden;
    border:1px solid #999;
}
.content img{display:block;}
.arrow{
    display:inline-block;
    padding:5px 15px;
    background:#eee;
    border-radius:3px;
    margin:3px 0;
    cursor:pointer;
    border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
    <img src="http://placehold.it/400x300?text=image+1">
    <img src="http://placehold.it/400x300?text=image+2">
   <img src="http://placehold.it/400x300?text=image+3">
</div>