Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Image Slideshow

Posted by: Mattab0lism Jun 16 2018, 05:57 AM

Hi everyone, i'm making a site with a slideshow and have all my images in one folder "images" same heirahcy as the html

<div style="position: relative; left: 50%; ">
<img id="myButton" src="images/2.png" width= 900 style="background-color: white;"/>
<script type="text/javascript">
var images = ['images/chaos1.png', 'images/chaos2.png', 'images/chaos3.png', 'images/chaos4.png', 'images/chaos5.png', 'images/chaos6.png', 'images/chaos7.png', 'images/chaos8.png'],
i = 1;

// preload
for (var j=images.length; j--wink.gif {
var img = new Image();
img.src = images[j];

// event handler
document.getElementById('myButton').addEventListener('click', function() {
this.src = images[i >= images.length - 1 ? i = 0 : ++i];
}, false);

Posted by: Mattab0lism Jun 16 2018, 12:23 PM


<div id="imageGallery1"style="position: relative; left: 25%; ">
<img id="image1" src="images/Asset%201@2x.png"/>
<div id="previous" style="color: black; text-shadow: 2px white; position: relative"><img src="images/Previous.png" style="top: 50%;"></div>
<div id="next" style="color: black; text-shadow: 2px white;position: relative; left:50%; top: 40%;"><img src="images/Next.png"></div>

<script src=""></script>

$( document ).ready(function() {

var images = [

src="images/tribe/Asset 2@2x.png",
src="images/tribe/Asset 3@2x.png",
src="images/tribe/Asset 4@2x.png",
src="images/tribe/Asset 5@2x.png",
src="images/tribe/Asset 6@2x.png",
src="images/tribe/Asset 7@2x.png",
src="images/tribe/Asset 8@2x.png",
src="images/tribe/Asset 9@2x.png",
src="images/tribe/Asset 10@2x.png",
src="images/tribe/Asset 11@2x.png",
src="images/tribe/Asset 12@2x.png",
src="images/tribe/Asset 13@2x.png",
src="images/tribe/Asset 14@2x.png",
src="images/tribe/Asset 15@2x.png",
src="images/tribe/Asset 16@2x.png",
src="images/tribe/Asset 17@2x.png",
src="images/tribe/Asset 18@2x.png",
src="images/tribe/Asset 19@2x.png",
src="images/tribe/Asset 20@2x.png",
src="images/tribe/Asset 21@2x.png",
src="images/tribe/Asset 22@2x.png",
src="images/tribe/Asset 23@2x.png",
src="images/tribe/Asset 24@2x.png",
src="images/tribe/Asset 25@2x.png",
src="images/tribe/Asset 26@2x.png",

var imageIndex = 0;

$("#previous").on("click", function(){
imageIndex = (imageIndex + images.length -1) % (images.length);
$("#image1").attr('src', images[imageIndex]);

$("#next").on("click", function(){
imageIndex = (imageIndex+1) % (images.length);
$("#image1").attr('src', images[imageIndex]);



Powered by Invision Power Board (
© Invision Power Services (