Jquery- moving a scrollbar automatically to a specific location after particular time

StackOverflow https://stackoverflow.com/questions/16867774

Pregunta

Here is my JsFiddle

How can i move my scrollbar automatically to the right (after third image) with some fade effect after few specific seconds so that user can see the next set of images.

can someone tell me how it can be done using javascript and jquery.

Here is my Html

<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
</div>

Here is my css:

.gallery .row {
white-space: nowrap;
}
.gallery img {
display: inline-block;
/* other properties */
}
¿Fue útil?

Solución

Here is a simplified jQuery version:

$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
});
.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

To add a simple fade transition between slides add: 

$('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
});


$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
  $('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
  });
});
.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

and a pure CSS version:

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
  animation: scroll 8s infinite;
}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  6.25% {
    transform: translatex(0px);
    opacity: 1;
  }
  12.5% {
    transform: translatex(0px);
    opacity: 1;
  }
  18.75% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  31.25% {
    transform: translatex(-331px);
    opacity: 1;
  }
  37.5% {
    transform: translatex(-331px);
    opacity: 1;
  }
  43.75% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  56.25% {
    transform: translatex(-662px);
    opacity: 1;
  }
  62.5% {
    transform: translatex(-662px);
    opacity: 1;
  }
  68.75% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  81.25% {
    transform: translatex(-993px);
    opacity: 1;
  }
  87.5% {
    transform: translatex(-993px);
    opacity: 1;
  }
  93.75% {
    transform: translatex(-1324px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.gallery:hover img {
  animation: none;
}
.gallery:hover {
  overflow-x: scroll;
}
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

Otros consejos

Moving scrollbar would not give you optimum results, with regards to performance.

However, to answer your question:

var Slider = {
    incr: 3, //everytime go to 3rd image from current
    imageNumber: 0, //this keeps track of index of image to go to
    intervalDuration: 3000, //interval between each scroll
    imageMargin: 20, //margin that you set between images
    nextImage: null, //next image object, keeps updating,
    updateNextImage: function(){
            $(Slider.nextImage).removeClass('next');
            Slider.imageNumber += Slider.incr;
            $('.row:first img:nth-child(' + Slider.imageNumber + ')').addClass('next');
            Slider.nextImage = $('img.next');
    }
}

$(document).ready(function(){
    //set next item first
    Slider.updateNextImage();

    setInterval(function(){
        try{
            $('.gallery').animate(
                { scrollLeft: $(Slider.nextImage).position().left + $('.gallery').scrollLeft() + $(Slider.nextImage).outerWidth() + Slider.imageMargin }, //Scrolls to the element
                300, function(){
                    //update next item
                    Slider.updateNextImage();
            });
        } catch(e){
        //code to restart slider
            Slider.imageNumber = 0;
            $('.gallery').animate({scrollLeft: 0});
            Slider.updateNextImage();
        }

    }, Slider.intervalDuration);

});

For more control, cleaner coding and many other forms of sliders, I suggest an existing jQuery plugin to achieve this: http://www.woothemes.com/flexslider/

All the best.

I didn't really understand what you meant by:

"with some fade-in effect"


But here is a "slider" that jumps over 3 classes at a time:

var left = $('.normalimage:nth-child(3)').offset().left-$('.gallery').offset().left;
var max = $('.gallery').width();
var step = left;
setInterval( function(){
    $('.gallery').animate({
        scrollLeft:step,
    } ,300);
    if(max>= step)
        step += left;
    else
        step = 0;
}, 2000 );

Demo here

Working jsFiddle Demo

$(function () {
    // show 3 elements in each row
    var count = 3;

    function showItems(start) {
        if (start >= $('.gallery .row:eq(0) img').length) {
            start = 0;
        }

        // for debug
        console.log('Showing items ' + start + ' - ' + (start + count));

        $('.gallery .row img').css('display', 'none');
        $('.gallery .row').each(function () {
            var $row = $(this);
            for (var i = start; i < count + start; i++) {
                $row.find('img').eq(i)
                    .css('opacity', 0)
                    .css('display', 'inline-block')
                    .animate({opacity: 1});
            }
        });

        setTimeout(function () {
            showItems(count + start);
        }, 1000);
    }

    showItems(0);
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top