Moving Image through javascript like flash file in asp.net

This asp.net article used for making slide show from JavaScript. Many time we need to do such task like moving images in html pages or an aspx page then we think about flash to do that task but it is must to install flash plugin in client browser,so we need an alternative solution of flash to move image just like flash, so here is the solution for making image slide solution through javascript, Just Add Your Image In Picture Array And Add Fuction to body onload.


<html>
<head>
   <script type="text/javascript">
       // Set the slideshow speed (in milliseconds)
       var SlideShowSpeed = 2000;
       // Set the duration of crossfade (in seconds)
       var CrossFadeDuration = 2;
       var Picture = new Array(); // don't change thishttp://www.assoc-amazon.com/e/ir?t=widgetsamazon-20&l=btl&camp=213689&creative=392969&o=1&a=B003A9FFKI
      //***Add Your Image Here To Make Slide Show)**
      Picture[1] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyecghfGyEu_dXqxW07qECfk2kX4U1y5bTQldwNlBDFpzj2oYSN34xyDNaUG91vORP3YkVYLRQWiWlXZrTLhKytvnnwJBKikDTYoW5N7VKut_mSMfiQ-Jyy9BjrKYfNwghC4GeGLk7hac/h80/images2.jpeg';

       Picture[2] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnURvYBJ-i0GYgErvCq_rAAiFmvxwxRCJ-wCmshdxOnO12gBU7MSFMKDjdiBOde277i2AM9sapqh3hdI9-lSGABywFYdmVQ25_UeSf0S9m1WTfzg78WY6mPAcbrI0FqxvEFCddJxvxvw/h80/images.jpeg';

       Picture[3] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB7fSNdqcnyFAdMSVvICc4KftRmUzP3MZMKCqMe_7CRykRc2JlAJcP1d20SXniKocBxUu527OgF4Z5OjMJTnWz6_VzGREBvQMbBRCNZNpLoJK3Uu6cQL1xKBNzmxcZwVWWZAahXsfFXtE/h80/images1.jpeg';

       Picture[4] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTxpW0fqprPpKwePzEvNKnqGbCVAsCykCy5yktEHVod1aFZCoNvGcl5JWz9bChl_Yb-UUP0gwJHmHV-kJxEQRoQ-hPEVOak-uBO1y-oOzsUthe43vgXMAj4CFvJYjORs-y-a3a-a38HM/h80/images3.jpeg';

       Picture[5] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHuDO3BCHA0kM6X62wqG4GlDZBaHceAeYmg17_7ELrQfxC0SiTae6nvrf2JB_bUdHYju5NrC_LQ926AhL4-dOqn2cvu7n0QL1cCtzmXHhLQQvdYMBSy4Wkj5LgZw8B4s9QbNsdFOv14YE/h80/images4.jpeg';

       Picture[6] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TiFZAwD6lTMss5rR8JgAXOBfECa9e35tCggb70mwAfZHJh5pAIKeDFIHc-5I3l3zIIHSziy3A-nRtydvBLLwsJVIDzhuGObwbuCZAX8-NxGDgGXzeKn2WNSSsDSALXrYBXqESFeXQD8/h80/index.jpeg';

       Picture[7] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8h0X91zlhSjE7CPwHJwcSu-CXqyNLeDfwsSENRQTkx4lq_CQnuqw_mWjuHG1vPTnCLqdy25CWYTgSw5ZKELv-GlQd69tJfKshRtI2jnvKLz0NzgNlifqanTKgtL17168GFM8kBfdc9-I/h80/index1.jpeg';

       var tss;
       var iss;
       var jss = pickRandom(Picture.length - 1);
       var pss = Picture.length - 1;
       //alert(jss);
       var preLoad = new Array();
       for (iss = 1; iss < pss + 1; iss++) {
           preLoad[iss] = new Image();
           preLoad[iss].src = Picture[iss];
       }
       function runSlideShow() {
           if (document.all) {
               document.images.LogoBox.style.filter = "blendTrans(duration=2)";
               document.images.LogoBox.style.filter = "blendTrans(duration=CrossFadeDuration)";
               document.images.LogoBox.filters.blendTrans.Apply();
           }
           document.images.LogoBox.src = preLoad[jss].src;
           //if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
           if (document.all) document.images.LogoBox.filters.blendTrans.Play();
           jss = jss + 1;
           if (jss > (pss)) jss = 1;
           tss = setTimeout('runSlideShow()', SlideShowSpeed);
       }
       function pickRandom(range) {
           if (Math.random)
               return (Math.round(Math.random() * range) + 1);
           else {
               return 1;
           }
       }
   </script>
</head>
<body onload="setTimeout('runSlideShow()', 1001);">
   <!-- Client Name of ImageControl must be 'LogoBox'-->
    <img name="LogoBox" border="0" src="design/space.gif" width="140" >
</body>
</html>


// OutPut of the following code is here:-




Popular Posts