You must Sign In to post a response.
  • Category: JavaScript

    How to make a slideshow using javascript

    Hi all,

    Im trying to make the slideshow using javascript, the images will be available in the folder. My requirement is the images can be replaced at anytime in the folder, according to that the script retrives the available images from the directory and should play the slide show. Please let me know how to achieve and also provide if any code snippet if you have.

    Thanks
    Kanna
  • #648561
    please check the below script for slideshow


    <script type="text/javascript">
    var src = ["/Calender/images/ui-icons_f9bd01_256x240.png", "/Calender/images/ui-icons_217bc0_256x240.png"];
    duration = 5;
    Temp = [];
    Count = 0;
    Rotate();

    function Rotate() {
    var n = (Count + 1) % src.length;
    if (Temp[n] && (Temp[n].complete || Temp[n].complete == null)) {
    document["RotateImages"].src = Temp[Count = n].src;
    }
    Temp[n = (Count + 1) % src.length] = new Image;
    Temp[n].src = src[n];
    setTimeout("Rotate()", duration * 1000);
    }

    </script>


    have this image tag in the html


    <img name="RotateImages" src="/Calender/images/ui-icons_217bc0_256x240.png" border="0" />


    every 5 seconds the image would change

    Please mark this as Answer, if this helps

    Regards,
    Alwyn Duraisingh.M 
    << Database Administrator >>
    Jesus saves! The rest of us better make backups...

  • #648591
    You can also achieve this using the Ajax slide show extender control , you just have to refresh the source file so that if there is any change in the file name it can be updated in the slide show as well.


    <ajaxToolkit:SlideShowExtender ID="SlideShowExtender1"
    runat="server"
    TargetControlID="imgPhotos"
    SlideShowServiceMethod="GetSlides"
    SlideShowServicePath="MyWebService.asmx"
    AutoPlay="true"
    NextButtonID="btnNext"
    PlayButtonText="Play"
    StopButtonText="Stop"
    PreviousButtonID="btnPrev"
    PlayButtonID="btnPlay"
    Loop="true"/>


    Thanks & Regards
    Anil Kumar Pandey
    Microsoft MVP, DNS MVM

  • #648607
    check below code:


    <style>
    body{
    background-position: 300 200;
    }
    </style>

    <script language="JavaScript">
    var b=new Array()
    b[0]="a.jpg"
    b[1]="s.jpg"
    b[2]="c.jpg"

    var speed=1000

    var p=new Array()
    for (i=0;i<b.length;i++){
    p[i]=new Image()
    p[i].src=b[i]
    }

    var i=-1

    function slide(){
    if (inc<bgslides.length-1)
    i++
    else
    i=0
    document.body.background=p[i].src
    }

    if (document.all||document.getElementById)
    window.onload=new Function('setInterval("slide()",speed)')

    </script>

    Regards
    Mr.Rajesh
    Software Engg.

  • #648612
    In this, First we create an image(img1) with the help of <img> tag. and place it in the <body> tag:->

    <body onload="show()">
    <img id="img1" width="120px" />
    </body>


    and then we Create a javascript function(show()):

    <script language="javascript" type="text/javascript">
    function show()
    {
    document.getElementById('img1').src="Image/banner-02.jpg";
    setTimeout("show2()",5000);
    }

    function show2()
    {
    document.getElementById('img1').src="Image/banner-03.jpg";
    setTimeout("show3()",5000);
    }
    function show3()
    {
    document.getElementById('img1').src="Image/banner-04.jpg";
    setTimeout("show4()",5000);
    }
    function show4()
    {
    document.getElementById('img1').src="Image/banner-05.jpg";
    setTimeout("show5()",5000);
    }
    function show5()
    {
    document.getElementById('img1').src="Image/banner-01.jpg";
    setTimeout("show()",5000);
    }
    </script>

    Here we take a folder(Image)


  • This thread is locked for new responses. Please post your comments and questions as a separate thread.
    If required, refer to the URL of this page in your new post.