Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
23
rated 0 times [  29] [ 6]  / answers: 1 / hits: 75408  / 11 Years ago, sun, january 19, 2014, 12:00:00

I want to make a simple slide show that automatically plays when the page is loaded. Here is my code so far:



HTML:



<div id=slideshow>
<div>
<img src=slide_1.png>
</div>
<div>
<img src=slide_2.png>
</div>
<div>
<img src=slide_3.png>
</div>
</div>


CSS:



#slideshow {  

position: relative;

width: 900px;

height: 450px;

}

#slideshow > div {

position: absolute;

}


If possible, can someone please provide me with a JavaScript code that will automatically play the slide show, as well as change the slides by using a slide transition, and also have it replay infinite amount of times while the user is still of the page? Also, maybe a navigation that has numbers in the bottom right corner. Here is an example of what I am looking for: (http://www.http://www.suprafootwear.com/). The large slideshow up top is what I want, the only difference is that I want the transition to be a linear slide motion instead of the fade transition. Please maintain the 900px x 450px size. Any help is appreciated. Thank you in advance!


More From » jquery

 Answers
5

Try this simple javascript code to make image slider.




(function() {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;

if (counter <= images.length) {
setInterval(function() {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;

if (counter === images.length) {
counter = 1;
}
}, 4000);
}
})();

.container {
position: relative;
width: 100%;
height: 300px;
border-radius: 5px;
border: 1px solid red;
overflow: hidden;
}

<div id=imgGallary class=container>
<img src=http://www.examiningcalvinism.com/kingdavid.jpg alt= width=100% height=300 />
<img src=http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg alt= width=100% height=300 />
<img src=http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg alt= width=100% height=300 />
<img src=http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg alt= width=100% height=300 />
</div>




[#73069] Friday, January 17, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
domeniccolti

Total Points: 276
Total Questions: 98
Total Answers: 93

Location: India
Member since Fri, May 13, 2022
2 Years ago
domeniccolti questions
Mon, Oct 18, 21, 00:00, 3 Years ago
Thu, Oct 14, 21, 00:00, 3 Years ago
Thu, Jul 15, 21, 00:00, 3 Years ago
Sat, Oct 24, 20, 00:00, 4 Years ago
Thu, Sep 3, 20, 00:00, 4 Years ago
;