Image Slideshow |
Image Slideshow |
Mattab0lism |
Jun 16 2018, 05:57 AM
Post
#1
|
Group: Members Posts: 5 Joined: 16-June 18 Member No.: 26,660 |
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-- { 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); </script><br><br> </div> |
Mattab0lism |
Jun 16 2018, 12:23 PM
Post
#2
|
Group: Members Posts: 5 Joined: 16-June 18 Member No.: 26,660 |
SOLVED:
<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="http://code.jquery.com/jquery-1.11.0.min.js"></script> <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]); }); $("#image1").attr(images[0]); }); </script> |
Lo-Fi Version | Time is now: 26th April 2024 - 03:48 AM |