Hi, First, what I want to say is I am very new to JavaScript. The rotation I made is rather buggy. When I switch between the slides, a white background appears and keeps flashing. This, I believe, happens when there is a switch between first and the last slide and vice versa. The other problem is, that when I switch, the rotation keeps on going, which I don't want. Basically, what I want to do is to rotate it by default, then when I switch, I want it to wait 4000ms, then keep on rotating. And I need to solve that bug with white background showing/flashing. Any help is much appreciated. But since I am very new to JS, if you have the time, please make it as clear as you possibly can, because I don't just need it to work, but I want to understand every line of the code and go from there. Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hopefullybetterslider</title> <style type="text/css"> .imgcontainer{ position:relative; width:500px; height:300px; box-shadow: 1px 1px 3px #333333; border:solid 1px #000; } .img1{ position:absolute; width:500px; height:300px; background-color:#CCC; } .img2{ position:absolute; width:500px; height:300px; background-color:#999; } .img3{ position:absolute; width:500px; height:300px; background-color:#666; } .switch1{ position:absolute; top:-12px; right:10px; background-color:yellow; padding:5px; display:block; } .switch2{ position:absolute; top:-12px; right:80px; background-color:yellow; padding:5px; display:block; } .switch3{ position:absolute; top:-12px; right:150px; background-color:yellow; padding:5px; display:block; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ function rotate(){ $('.imgcontainer div').last().fadeOut(500,function(){ $(this).insertBefore($('.imgcontainer div').first()).show(); }); } setInterval(function(){ rotate(); },4000); $('.switch1').click(function(){ $('.imgcontainer div').fadeOut(200,function(){ $('.img1').fadeIn(200); }); }); $('.switch2').click(function(){ $('.imgcontainer div').fadeOut(200,function(){ $('.img2').fadeIn(200); }); }); $('.switch3').click(function(){ $('.imgcontainer div').fadeOut(200,function(){ $('.img3').fadeIn(200); }); }); }); </script> </head> <body> <div class="imgcontainer"> <div class="img1">texttexttexttexttexttexttexttex<br>ttexttexttexttexttexttexttexttext</div> <div class="img2">text2text2text2text2text2text2text2<br>text2text2text2text2text2text2</div> <div class="img3">text3text3text3text3text3text3text3<br>text3text3text3text3text3text3</div> <p class="switch1">switch1</p> <p class="switch2">switch2</p> <p class="switch3">switch3</p> </div> </body> </html> Code (markup):
Well, here's a new take - it fixes most of the problems, except the stop-then-continue problem with clicking on the switch-buttons: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hopefullybetterslider</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0;} #imgcontainer { position:relative; width:500px; height:300px; box-shadow: 1px 1px 3px #333333; border:solid 1px #000; margin: 20px auto; } ul { list-style-type: none; width: 100%; } #imglist_1 li { display: block; position:absolute; width:500px; height:300px; background-color:#CCC; text-align: center; } #imglist_1 #img_2 { background-color: #ddd; } #imglist_1 #img_3 { background-color: #eee; } #switchlist_1 li { position:absolute; bottom: -50px; right:10px; background-color:yellow; padding:5px; } #switchlist_1 li#switch_2{ right:80px; } #switchlist_1 li#switch_3{ right:150px; } </style> <script type="text/javascript"> $(document).ready(function(){ $('#imglist_1 li').not('#img_1').hide(); function rotate(){ var currentItem = $('#imglist_1 li:visible').attr('id'); var getIDnum = currentItem.split('_'); $('#'+currentItem+'').hide().next('li').show(); if (getIDnum[1] == $('#imglist_1 li').length) { $('#'+currentItem+'').hide().parent('ul').find('li:first-child').show(); } }; setInterval(function(){ rotate(); },4000); $('#switchlist_1 li').click(function(){ var imgID = $(this).attr('id').split('_'); $('#imglist_1 li').not('#img_'+imgID[1]+'').hide(); $('#img_'+imgID[1]+'').show(); }); }); </script> </head> <body> <div id="imgcontainer"> <ul id="imglist_1"> <li id="img_1">TEXT 1</li> <li id="img_2">TEXT 2</li> <li id="img_3">TEXT 3</li> </ul> <ul id="switchlist_1"> <li id="switch_1">Switch 1</li> <li id="switch_2">Switch 2</li> <li id="switch_3">Switch 3</li> </ul> </div> </body> </html> Code (markup): I redid a lot of the code, especially the markup - also, I've reconfigured some of the CSS, and generally made it a bit more compact and easier to read while developing.
PoPSiCle, I like it. I played around with the image options and jqueryui slide. I am sure this is pretty straight forward modification info, but thought I would just post it: Notice the auto function fades the back image and the button function does not. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hopefullybetterslider - with images links and sliding</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0;} #imgcontainer { position:relative; width:960px; height:540px; box-shadow: 1px 1px 3px #333333; border:solid 1px #000; margin: 20px auto; } ul { list-style-type: none; width: 100%; } #imglist_1 li { display: block; position:absolute; width:960px; height:540px; background-color:#CCC; background-image:url('http://cdn1.coresites.mpora.com/twc/wp-content/uploads/2014/03/Afan-Bike-park.jpg'); background-repeat:no-repeat; text-align: center; } #imglist_1 #img_2 { background-color: #ddd; background-image:url('http://www.star-telegram.com/incoming/3awpk6/picture3780894/ALTERNATES/FREE_960/AW7Uk.So.58.jpeg'); background-repeat:no-repeat; } #imglist_1 #img_3 { background-color: #eee; background-image:url('http://static.digitalconcerthall.com/cms/thumbnails/960x540/images/concert/100410-Kozena.jpg'); background-repeat:no-repeat; } #switchlist_1 li { position:absolute; bottom: -50px; right:10px; background-color:yellow; padding:5px; } #switchlist_1 li#switch_2{ right:80px; } #switchlist_1 li#switch_3{ right:150px; } </style> <script type="text/javascript"> $(document).ready(function(){ $('#imglist_1 li').not('#img_1').hide(); function rotate(){ var currentItem = $('#imglist_1 li:visible').attr('id'); var getIDnum = currentItem.split('_'); $('#'+currentItem+'').fadeOut(1000).next('li').show("slide", {direction: 'right'},1000); if (getIDnum[1] == $('#imglist_1 li').length) { $('#'+currentItem+'').hide().parent('ul').find('li:first-child').show("slide", {direction: 'right'},1000); } }; setInterval(function(){ rotate(); },4000); $('#switchlist_1 li').click(function(){ var imgID = $(this).attr('id').split('_'); $('#imglist_1 li').not('#img_'+imgID[1]+'').show("slide", {direction: 'right'},1000); $('#img_'+imgID[1]+'').show("slide", {direction: 'right'},1000); }); }); </script> </head> <body> <div id="imgcontainer"> <ul id="imglist_1"> <li id="img_1">TEXT 1</li> <li id="img_2">TEXT 2</li> <li id="img_3">TEXT 3</li> </ul> <ul id="switchlist_1"> <li id="switch_1">Switch 1</li> <li id="switch_2">Switch 2</li> <li id="switch_3">Switch 3</li> </ul> </div> </body> </html> HTML: Also noticed that the switch buttons fail with the error: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/ HTML: I tried fixing it with direct click functions for each button, but still something is wrong. Do you have to declare each button as it's own div? === Photo credits in case you are interested: http://totalwomenscycling.com/mountain-biking/mountain-biking-events/where-to-ride-afan-mtb-trails-21517/2/ http://www.star-telegram.com/living/indulge/indulge-getting-around/article3905976.html https://www.digitalconcerthall.com/en/concert/318