www.webdeveloper.com
Results 1 to 5 of 5

Thread: stop a auto slide

  1. #1
    Join Date
    Nov 2013
    Posts
    44

    stop a auto slide

    i have a created an auto image slide gallery which i want to stop whenever i click on the "close auto " button.but cant figure out how to.so please help me out on this!!i've deleated the "next" and "previous" sections of javascript for simplification because that part works just fine.
    HTML Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    #this{
    	width:500px;
    	height:100px;
    	border:1px solid blue;
    	display:none;
    }
    #this img{
    	width:100px;
    	height:100px;
    }
    #that {
    	width:300px;height:300px;
    	position:absolute;top:120px;
    	left:200px;border:1px solid black;
    }
    #that img{
    	width:300px;height:300px;
    }
    	a:hover{
    		color:red;
    	}
    </style>
    </head>
    
    <body style="position:relative;">
    <div id="this"></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:510px;" id="next"><a href="#" onClick="show();">next</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:0px;left:0px;" id="previous"><a href="#" onClick="showBack();">previous</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:600px;" id="auto"><a href="#" onClick="auto();">auto</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:50px;left:600px;" id="auto"><a href="#" onClick="close();">closeAuto</a></div>
    <div id="that"><img src="image1.jpg" /></div>
    <script>
    var i;
    	var imag = ["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"]
    function load(){
    	var m=document.getElementById("this");
    	
    	for(i=0;i<imag.length;i++){
    		m.innerHTML += '<img src="'+imag[i]+'" id="'+i+'"  />';
    	}
    	
    }
    	</script>
    <script>load();</script>
    
    
    <script>
    a=0;
    
    function auto(){
    	
    	var m=document.getElementById("that");
    	a++;
    	if(a==imag.length){
    			m.innerHTML='<img src="'+imag[0]+'" />';
    			a=0;
    		}else{
    		m.innerHTML='<img src="'+imag[a]+'" />';
    		}
    	
    		
    		var c=setTimeout(auto,700);
    		
    }
    </script>
    <script>
    function close(){
    	clearTimeout(c);
    	var m=document.getElementById("that");
    	m.innerHTML='<img src="'+imag[a]+'" />';
    }
    </script>
    </body>
    </html>
    Last edited by alzami; 12-01-2013 at 11:26 PM. Reason: mistake

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,661
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    #this{
    	width:500px;
    	height:100px;
    	border:1px solid blue;
    	display:none;
    }
    #this img{
    	width:100px;
    	height:100px;
    }
    #that {
    	width:300px;height:300px;
    	position:absolute;top:120px;
    	left:200px;border:1px solid black;
    }
    #that img{
    	width:300px;height:300px;
    }
    	a:hover{
    		color:red;
    	}
    </style>
    </head>
    
    <body style="position:relative;">
    <div id="this"></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:510px;" id="next"><a href="#" onClick="return show();">next</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:0px;left:0px;" id="previous"><a href="#" onClick="return showBack();">previous</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:600px;" id="auto"><a href="#" onClick="return auto();">auto</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:50px;left:600px;" id="auto"><a href="#" onClick="return Close();">closeAuto</a></div>
    <div id="that"><img src="../StdImages/1.gif" /></div>
    <script>
    var i;
    	var imag = ["../StdImages/1.gif","../StdImages/2.gif","../StdImages/3.gif","../StdImages/4.gif","../StdImages/5.gif"]
    function load(){
    	var m=document.getElementById("this");
    
    	for(i=0;i<imag.length;i++){
    		m.innerHTML += '<img src="'+imag[i]+'" id="'+i+'"  />';
    	}
    
    }
    
    load();
    
    
    var a=0;
    var c=null;
    
    function auto(){
       var m=document.getElementById('that');
      	a++;
    	if(a==imag.length){
    			m.innerHTML='<img src="'+imag[0]+'" />';
    			a=0;
    		}else{
    		m.innerHTML='<img src="'+imag[a]+'" />';
    		}
    
    
    		c=setTimeout(function(){ auto(); },700);
      return false;
    }
    
    function Close(id){
       var m=document.getElementById('that');
    	clearTimeout(c);
    	m.innerHTML='<img src="'+imag[a]+'" />';
      return false;
    }
    
    </script>
    </body>
    </html>
    better

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    #this{
    	width:500px;
    	height:100px;
    	border:1px solid blue;
    	display:none;
    }
    #this img{
    	width:100px;
    	height:100px;
    }
    #that {
    	width:300px;height:300px;
    	position:absolute;top:120px;
    	left:200px;border:1px solid black;
    }
    #that img{
    	width:300px;height:300px;
    }
    	a:hover{
    		color:red;
    	}
    </style>
    </head>
    
    <body style="position:relative;">
    <div id="this"></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:510px;" id="next"><a href="#" onClick="return SlideShow.Next('that',1);" >next</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:0px;left:0px;" id="previous"><a href="#" onClick="return SlideShow.Next('that',-1);">previous</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:40px;left:0px;" id="goto0"><a href="#" onClick="return SlideShow.GoTo('that',0);">GoTo 0</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:80px;left:0px;" id="goto1"><a href="#" onClick="return SlideShow.GoTo('that',1);">GoTo 1</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:120px;left:0px;" id="goto2"><a href="#" onClick="return SlideShow.GoTo('that',2);">GoTo 2</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:160px;left:0px;" id="goto3"><a href="#" onClick="return SlideShow.GoTo('that',3);">GoTo 3</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:200px;left:0px;" id="goto4"><a href="#" onClick="return SlideShow.GoTo('that',4);">GoTo 4</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:600px;" id="auto"><a href="#" onClick="return SlideShow.Auto('that');">auto</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:50px;left:600px;" id="auto"><a href="#" onClick="return SlideShow.Pause('that');">Pause</a></div>
    <div id="that" onmouseover="SlideShow.Pause('that');" onmouseout="SlideShow.Auto('that');" ><img src="../StdImages/1.gif" /></div>
    
    <script>
    
    var SlideShow={
    
     GoTo:function(id,n){
      var o=this[id];
      if (o){
       this.Pause(o.id);
       if (o.ary[n]&&n!=o.n){
        o.ud=n<o.n?-1:1;
        this.rotate(o,n);
       }
      }
     },
    
     Next:function(id,ud){
      var o=this[id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
      return false;
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop[id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
      return false;
     },
    
     Pause:function(id,ms){
      var o=this[id];
      if (o){
       clearTimeout(o.to);
      }
      return false;
     },
    
     init:function(o){
      var id=o.ID,ary=o.SRCArray,hold=o.AutoHold,p=document.getElementById(id),img=p?p.getElementsByTagName('IMG')[0]:null,a=[],z0=0;
      if (img&&ary instanceof Array){
       for (var z0=0;z0<ary.length;z0++){
        a[z0]=new Image();
        a[z0].src=ary[z0];
       }
       o.id=id;
       o.img=img;
       o.ary=ary;
       o.lgth=ary.length-1;
       o.hold=typeof(hold)=='number'&&hold>0?hold:1000;
       o.ud=1;
       o.n=0;
       SlideShow[id]=o;
      }
     },
    
     rotate:function(o,n){
      this.Pause(o.id);
      var nu=n===true?o.n+o.ud:n;
      nu=nu>o.lgth?0:nu<0?o.lgth:nu
      o.n=nu;
      o.img.src=o.ary[o.n];
      n===true?this.Auto(o.id,o.hold):null;
     }
    }
    
    SlideShow.init({
     ID:'that',
     SRCArray:["../StdImages/1.gif","../StdImages/2.gif","../StdImages/3.gif","../StdImages/4.gif","../StdImages/5.gif"],
     AutoHold:1000
    });
    
    
    var i;
    	var imag = ["../StdImages/1.gif","../StdImages/2.gif","../StdImages/3.gif","../StdImages/4.gif","../StdImages/5.gif"]
    function load(){
    	var m=document.getElementById("this");
    
    	for(i=0;i<imag.length;i++){
    		m.innerHTML += '<img src="'+imag[i]+'" id="'+i+'"  />';
    	}
    
    }
    
    load();
    
    
    var a=0;
    var c=null;
    
    function auto(){
       var m=document.getElementById('that');
      	a++;
    	if(a==imag.length){
    			m.innerHTML='<img src="'+imag[0]+'" />';
    			a=0;
    		}else{
    		m.innerHTML='<img src="'+imag[a]+'" />';
    		}
    
    
    		c=setTimeout(function(){ auto(); },700);
      return false;
    }
    
    function Close(id){
       var m=document.getElementById('that');
    	clearTimeout(c);
    	m.innerHTML='<img src="'+imag[a]+'" />';
      return false;
    }
    
    </script>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2013
    Posts
    44
    the first example you've showed isn't working .though i've not tried the second option ,but for simplification i want to do it like the first one.what might be the problem hrer?

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,661
    I have tested the first code with IE and FF

    and it works for me

    remember to change the images for yours
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Nov 2013
    Location
    new york
    Posts
    60
    Quote Originally Posted by alzami View Post
    i have a created an auto image slide gallery which i want to stop whenever i click on the "close auto " button.but cant figure out how to.so please help me out on this!!i've deleated the "next" and "previous" sections of javascript for simplification because that part works just fine.
    HTML Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    #this{
    	width:500px;
    	height:100px;
    	border:1px solid blue;
    	display:none;
    }
    #this img{
    	width:100px;
    	height:100px;
    }
    #that {
    	width:300px;height:300px;
    	position:absolute;top:120px;
    	left:200px;border:1px solid black;
    }
    #that img{
    	width:300px;height:300px;
    }
    	a:hover{
    		color:red;
    	}
    </style>
    </head>
    
    <body style="position:relative;">
    <div id="this"></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:510px;" id="next"><a href="#" onClick="show();">next</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:0px;left:0px;" id="previous"><a href="#" onClick="showBack();">previous</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:600px;" id="auto"><a href="#" onClick="auto();">auto</a></div>
    <div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:50px;left:600px;" id="auto"><a href="#" onClick="close();">closeAuto</a></div>
    <div id="that"><img src="image1.jpg" /></div>
    <script>
    var i;
    	var imag = ["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"]
    function load(){
    	var m=document.getElementById("this");
    	
    	for(i=0;i<imag.length;i++){
    		m.innerHTML += '<img src="'+imag[i]+'" id="'+i+'"  />';
    	}
    	
    }
    	</script>
    <script>load();</script>
    
    
    <script>
    a=0;
    
    function auto(){
    	
    	var m=document.getElementById("that");
    	a++;
    	if(a==imag.length){
    			m.innerHTML='<img src="'+imag[0]+'" />';
    			a=0;
    		}else{
    		m.innerHTML='<img src="'+imag[a]+'" />';
    		}
    	
    		
    		var c=setTimeout(auto,700);
    		
    }
    </script>
    <script>
    function close(){
    	clearTimeout(c);
    	var m=document.getElementById("that");
    	m.innerHTML='<img src="'+imag[a]+'" />';
    }
    </script>
    </body>
    </html>
    Have you tried with Jquery coding?
    You can find some useful code for your error.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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