CODEWITHSUNDEEP
jquery
comical_uk
comical_uk

Reputation: 83

jquery rolling display of elements on timer

The title may be a bit misleading, I am not sure where to start, or even what to search for

I have a page with 10 div elements on it (say div1, div2, div3 etc)

I would like to be able to have a jquery function to display them in a rolling fashion

eg to start display div1, div2, div3, div4

and then 10 seconds later, it would show div2, div3, div4, div5

and then 10 seconds later, it would show div3, div4, div5, div6

... and so on to loop around

and then 10 seconds later, it would show div8, div9, div10, div1

would anyone be able to provide a solution or to give me a steer in the right direction please

Many thanks, Gary

Upvotes: 2

Views: 237

Answers (1)

guest271314
guest271314

Reputation: 1

var cycle = function cycle() {
  var first = $("section div:eq(0)");
  $("div:lt(4)").css("display", "block");
  $("div:gt(3)").css("display", "none");
  var dfd = $.Deferred(function(d) {
    setTimeout(d.resolve, 10000)
  }).promise();
  dfd.then(function() {
    first.css("display", "none").appendTo(first.parent());
    cycle()
  })
}

cycle()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</section>

Upvotes: 2

Related Questions