SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slide show in java script....

    Hi Please see below script & advise how to add two more slide in this page????
    Code:
    <html>
    <head>
    <title>Test</title>
    
    <style type="text/css">
    #photoimg1 {position:absolute;z-index:2000;}
    #photoimg2 {position:absolute;z-index:1000;}
    
    </style>
    
    <script>
    var imglist = new Array("images/1.jpg","images/2.jpg","images/3.jpg");
    var imgnum = 0;
    var opacity = 100;
    var delta = 2.5;
    var intervalID;
    
    function LaunchShuffler()
    {
       var img;
       img = document.getElementById('photoimg1');
       img.src = imglist[0];
    
       img = document.getElementById('photoimg2');
       img.src = imglist[1];
    
    
      // wait for 2 seconds (2000 milliseconds)
       // set ImageFader() to run every 100 milliseconds
       window.setTimeout("intervalID = window.setInterval(\"ImageFader()\", 100);", 2000);
    }
    
    function ImageFader()
    {
       var img1;
       var img2;
       var nextimgindex;
    
       img1 = document.getElementById('photoimg1');
       img2 = document.getElementById('photoimg2');
    
       opacity -= delta;
       if (opacity < 0)
       {
    	  opacity += 100;
    	  imgnum = (imgnum + 1) % imglist.length;
    	  nextimgindex = (imgnum + 1) % imglist.length;
    
    	  img1.src = imglist[imgnum];
    	  img2.src = imglist[nextimgindex];
    
    	  window.clearInterval(intervalID);
    	  window.setTimeout("intervalID = window.setInterval(\"ImageFader()\", 100);", 
    
    2000);
       }
       setOpacity(img1, opacity);
       setOpacity(img2, 100 - opacity);
    }
    
    function setOpacity(obj, opacity) {
    	 opacity = (opacity == 100)?99.999:opacity;
    
    	//IE/Win
    	//obj.style.filter = "alpha(opacity:"+opacity+")";
    	obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha
    
    (style=0,opacity:"+opacity+")";
    
    	// Safari<1.2, Konqueror
    	obj.style.KHTMLOpacity = opacity/100;
    
    	// Older Mozilla and Firefox
    	obj.style.MozOpacity = opacity/100;
    
    	// Safari 1.2, newer Firefox and Mozilla, CSS3
    	 obj.style.opacity = opacity/100;
    }
    </script>
    
    </head>
    <body onload="LaunchShuffler();">
    <div id="photodiv"><img id="photoimg1" /><img id="photoimg2" /></div>
    
    </body></html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mehidy View Post
    Hi Please see below script & advise how to add two more slide in this page????
    There are some errors with that existing code that you should fix up first, before considering adding more to it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The images are set up here:

    Code:
    var imglist = new Array("images/1.jpg","images/2.jpg","images/3.jpg");
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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