Rotating image

Discussion in 'Scripts' started by David Nixon, Aug 24, 2012.

to remove all ads.
  1. David Nixon

    David Nixon New Member

    Messages:
    3
    Hello all,

    I've added a rotating image on my site. I'm very new to webdesign, but battling through slowly. I was wondering if anybody can help me with adding some code to make the images rotate more smoothly. Maybe slide of fade. Not sure on your opinions.

    Site: www.midlandsreptiles.com

    JS:

    <script language="JavaScript1.2">

    var howOften = 5; //number often in seconds to rotate
    var current = 0; //start the counter at 0
    var ns6 = document.getElementById&&!document.all; //detect netscape 6

    // place your images, text, etc in the array elements here
    var items = new Array();


    // ---------------------------------------------------- Below is the code of the rotating javascript images---images are saved on a seperate midlandsreptiles page and linked---------




    items[0]="<img alt='image0 (9K)' src='http://midlandsreptiles.com/Rotating_javascript.htm/1.jpg' height='290' width='432' border='1px' /></a>"; //a linked image
    items[1]="<img alt='image1 (9K)' src='http://midlandsreptiles.com/Rotating_javascript.htm/2.jpg' height='290' width='432' border='0' /></a>"; //a linked image
    items[2]="<img alt='image2 (9K)' src='http://midlandsreptiles.com/Rotating_javascript.htm/3.jpg' height='290' width='432' border='0' /></a>"; //a linked image


    <!---------------------------------------------------------end of image link code---------------------------------->


    function rotater() {
    document.getElementById("placeholder").innerHTML = items[current];
    current = (current==items.length-1) ? 0 : current + 1;
    setTimeout("rotater()",howOften*1000);
    }

    function rotater() {
    if(document.layers) {
    document.placeholderlayer.document.write(items[current]);
    document.placeholderlayer.document.close();
    }
    if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
    if(document.all)
    placeholderdiv.innerHTML=items[current];

    current = (current==items.length-1) ? 0 : current + 1; //increment or reset
    setTimeout("rotater()",howOften*1000);
    }
    window.onload=rotater;
    //-->
    </script>



    The html:

    <layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>



    Thanks in advance - please be basic with your answers :)

    Dave
     
  2. JakClark

    JakClark New Member

    Messages:
    128
    To achieve a sliding effect would require a different plugin. I wouldn't bother even attempting to re-use this particular image rotator because it is so, so old. Old enough to be using deprecated code (the <layer> tag should be replaced with an absolutely positioned <div>).

    I would highly recommend giving it a Google (terms such as: "free jquery image slider", or "top jquery sliders") if I'm perfectly honest. If you struggle to find an appropriate script, please refer back to this thread! :)
     
  3. leroy30

    leroy30 New Member

    Messages:
    485
  4. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    netscape 6?
     

Share This Page