AndrewSmith Posted December 15, 2012 Share Posted December 15, 2012 Does anyone know how to make two cycling banners on one page? Link to comment Share on other sites More sharing options...
justsomeguy Posted December 17, 2012 Share Posted December 17, 2012 How do you want them to cycle? Link to comment Share on other sites More sharing options...
AndrewSmith Posted December 17, 2012 Author Share Posted December 17, 2012 One after the other. It is only going to cycle between two images. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 17, 2012 Share Posted December 17, 2012 I understand that cycling means "one after the other", I wasn't asking that. If you want them to cycle on the page without the page refreshing then you can have an array of filenames in Javascript, with a function that runs on a timer to replace the image periodically. You can set it up to go sequentially through the array or pick a random entry. If you want the banner to change on each page load, but not change once the page is loaded, then you can use PHP to select an image from a directory of images and display that one. Link to comment Share on other sites More sharing options...
thescientist Posted December 17, 2012 Share Posted December 17, 2012 or just pick one random image from a JS array and not use the timer. In other words, you have to be clearer in your requirements and the expected behavior of the cycling to the user. Link to comment Share on other sites More sharing options...
AndrewSmith Posted December 19, 2012 Author Share Posted December 19, 2012 (edited) I want the banner to cycle in order of the images that are inputed. this is what I have but I don't know what to change the scripting to.<HTML><HEAD><script>imgArray = new Array(4);imgArray[0] = new Image;imgArray[0].src = "bluearrow.gif";imgArray[1] = new Image;imgArray[1].src = "redarrow2.gif";index = 0; function select() {index=Math.floor(Math.random()*2);document.banner.src=imgArray[index].src;setTimeout("select()", 20);return;}</SCRIPT></HEAD><BODY onLoad="select();" align=left><IMG SRC="bluearrow.gif"NAME="banner"WIDTH=400HEIGHT=100></BODY></HTML> I just made this recently but forgot how to change it back to sequence. Edited December 19, 2012 by AndrewSmith Link to comment Share on other sites More sharing options...
thescientist Posted December 20, 2012 Share Posted December 20, 2012 (edited) what specific part are you having problems with? Are you checking for errors in the console? anyway, here's one example <!DOCTYPE html> <head> <title>Banner Cycler Demo</title> <script> var bannerEle = {}; var index = 0; var images = [ 'http://blogmedia.jaludo.com/titter/wp-content/uploads/2012/05/cute-animals4.jpg', 'http://2.bp.blogspot.com/_fU7LdRkUMVM/S69-LzZdjqI/AAAAAAAAAvY/-8lLtbdkYGA/s1600/cute-animals-wallpapers-13.jpg', 'http://t2.gstatic.com/images?q=tbn:ANd9GcTPt0rtUWkML4prXYXC7XXifhHKSVDk2qKS0005fnbYxHq0OkIK', 'http://t1.gstatic.com/images?q=tbn:ANd9GcTNDq8wLcR_LQ3rMujXty4sVk6vSQ9fpVpAsmKGXxk31X_1E-2d' ]; var imageCycler = function(){ index = (index >= images.length - 1) ? 0 : index+=1; bannerEle.src = images[index]; }; window.onload = function(){ bannerEle = document.getElementById("banner"); setInterval(imageCycler, 2000); }; </script> </head> <body> <img id="banner" src="http://blogmedia.jaludo.com/titter/wp-content/uploads/2012/05/cute-animals4.jpg" alt="banner"/> </body></html> Edited December 21, 2012 by thescientist Link to comment Share on other sites More sharing options...
AndrewSmith Posted December 21, 2012 Author Share Posted December 21, 2012 I fixed it, thanks for the help Link to comment Share on other sites More sharing options...
mountgreen Posted April 30, 2014 Share Posted April 30, 2014 I faced the same problem when creating a Javascript cycling banner. I wrote a tutorials hopefully will help people like me. You can find it at: http://dhwebfolio.com/tutorials.html. Happy coding Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now