www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Javascript loop failing

  1. #1
    Join Date
    Jul 2009
    Posts
    5

    resolved [RESOLVED] Javascript loop failing

    Hi, I’m trying to create my own image slider with css and javascript. All is going well but my code is not looping…
    It goes through all the images once and then stop at the last image, it does not reset back to the first image.

    Code:
    function test2() {
    (function() {
        var rotator = document.getElementsByName("slide_switch");
        var delayInSeconds = 5;
        var num = 0;
        var len = rotator.length;
        setInterval(function(){
        rotator[num].checked=true;
        num = (num === len) ? 0 : ++num; //reset if last image reached 
        }, delayInSeconds * 1000);
    }());
    }
    Any help will be valued thanks

  2. #2
    Join Date
    Jul 2009
    Posts
    5
    I'm pasting my full code to get a clear picture.
    HTML Code:
    <div class="slider">
    	<input type="radio" name="slide_switch" id="id1"/>
    	<label for="id1">
    		<img src="img/banner1.jpg" width="100"/>
        </label>
    	<img src="img/banner1.jpg"/>	
    	<input type="radio" name="slide_switch" id="id2" checked="checked"/>
    	<label for="id2">
    		<img src="img/banner2.jpg" width="100"/>
    	</label>
    	<img src="img/banner2.jpg"/>	
    	<input type="radio" name="slide_switch" id="id3"/>
    	<label for="id3">
    		<img src="img/banner3.jpg" width="100"/>
    	</label>
    	<img src="img/banner3.jpg"/>	
    	<input type="radio" name="slide_switch" id="id4"/>
    	<label for="id4">
    		<img src="img/banner4.jpg" width="100"/>
    	</label>
    	<img src="img/banner4.jpg"/>	
    	<input type="radio" name="slide_switch" id="id5"/>
    	<label for="id5">
    		<img src="img/banner5.jpg" width="100"/>
    	</label>
    	<img src="img/banner5.jpg"/>
        <input type="radio" name="slide_switch" id="id6"/>
    	<label for="id6">
    		<img src="img/banner6.jpg" width="100"/>
    	</label>
    	<img src="img/banner6.jpg"/>
       </div>
    CSS:
    Code:
    * {margin: 0; padding: 0;}
    .slider{
    	width: 100%; /*Same as width of the large image*/
    	position: relative;
    	/*Instead of height we will use padding*/
    	padding-top: 450px; /*That helps bring the labels down*/
    	
    	margin: 10px auto;
    	
    	/*Lets add a shadow*/
    	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
    }
    
    
    /*Last thing remaining is to add transitions*/
    .slider>img{
    	position: absolute;
    	left: 0; top: 0;
    	transition: all 0.5s;
    }
    /*Hide the bullets*/
    .slider input[name='slide_switch'] {
    	display: none;
    }
    
    .slider label {
    	/*Lets add some spacing for the thumbnails*/
    	margin: 18px 0 0 18px;
    	border: 3px solid #999;
    	
    	float: left;
    	cursor: pointer;
    	transition: all 0.5s;
    	
    	/*Default style = low opacity*/
    	opacity: 0.6;
    }
    
    .slider label img{
    	display: block;
    }
    .thumbClass lable{
    /*Lets add some spacing for the thumbnails*/
    margin: 18px 0 0 18px;
    border: 3px solid #999;
    float: left;
    cursor: pointer;
    transition: all 0.5s;
    /*Default style = low opacity*/
    opacity: 0.6;
    }
    .thumbClass lable img{
    display: block;
    }
    
    
    
    
    /*Time to add the click effects*/
    .slider input[name='slide_switch']:checked+label {
    	border-color: #666;
    	opacity: 1;
    }
    /*Clicking any thumbnail now should change its opacity(style)*/
    /*Time to work on the main images*/
    .slider input[name='slide_switch'] ~ img {
    	opacity: 0;
    	transform: scale(1.1);
    }
    /*That hides all main images at a 110% size
    On click the images will be displayed at normal size to complete the effect
    */
    .slider input[name='slide_switch']:checked+label+img {
    	opacity: 1;
    	transform: scale(1);
    }
    /*Clicking on any thumbnail now should activate the image related to it*/

    JavaScript:
    Code:
    function test2() {
    (function() {
        var rotator = document.getElementsByName("slide_switch");
        var delayInSeconds = 5;
        var num = 0;
        var len = rotator.length;
        setInterval(function(){
        rotator[num].checked=true;
        num = (num === len) ? 0 : ++num; //reset if last image reached 
        }, delayInSeconds * 1000);
    }());
    }
    I trigger the function with a onclick button.

    So like I mentioned above, the code is working fine and looping through all images up to the last image then it stops.

    This code part (in the javascript function) is suppose to reset the 'num' on last image and loop the images again but it's not.
    Code:
    num = (num === len) ? 0 : ++num;
    I'm not a javaScript pro so have no idea why this is not looping.

    Thanks guys
    Last edited by rizla_za; 06-17-2013 at 05:36 PM.

  3. #3
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    I haven't run this code, but if you allow num to reach len then the statement
    Code:
    rotator[num].checked=true;
    must cause an indicated error.

  4. #4
    Join Date
    Jul 2009
    Posts
    5
    For those who have the same problem:

    Changing my len to
    Code:
    var len = rotator.length -1;
    did the trick...

    Stupid mistake really. len value is 6 but when looping through the elements it will be rotator[0],be rotator[1], be rotator[2], be rotator[3], be rotator[4], be rotator[5] six elements but the last value is 5 not 6.

    Thanks
    Last edited by rizla_za; 06-18-2013 at 04:36 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles