Rolling div's with javascript

JavaScript
1

Hi, i need some help i’m looking for some javascript rotator to show an image and heading inside a div. i nedd a script to rotate them after some time. i’m quite new to javascript so i don’t know how to do it.

i’ve found some image rotator’s, but i want to be able to rotate the hole div.

it can be some plug in for a library, say jquery, anything actually.

Thanks in advance for the help!

2

How about this? You may want to put the script in an external file and start it onload.


<body>

<div id="rotator">
<h3 id="rotatorHeading"></h3>
<img id="rotatorImage" src="" alt="" />
</div>

<script type="text/javascript">
(function(){

var data = [
{heading:"First Heading", src:"image1.jpg"},
{heading:"Second Heading", src:"image2.jpg"},
{heading:"Third Heading", src:"image3.jpg"}];

var currentData = 0;
var timePerSlide = 4000;

var heading = document.getElementById("rotatorHeading");
var image = document.getElementById("rotatorImage");

function loop(){
  heading.innerHTML = data[currentData].heading;
  image.src = data[currentData].src;
  image.alt = data[currentData].heading;
  currentData = ++currentData &#37; data.length;
  
  setTimeout(function(){loop();}, timePerSlide);
}

loop();

})();
</script>

</body>
3

That’s really nice. thanks.

just one question: is it better to have the headings in the html due to SEO?

an ways the script does exctacly what im looking for, thak you very much for the help.

4

Put everything, divs, headings and images, in the html and then have JavaScript harvest them to build the data array. It can then hide all the divs and show them one by one. If the user doesn’t have js they still see all the content. If they do have js then they get the divs one at a time. Accessible to all, including spiderbotcrawlerites

5

brilliant thank tou very much