Horizontal Banner Slide

davestroller · 06-30-2011, 02:25 PM

Hi, i'm trying to create horizontal banner slide, I want something really simple and basic, most script i find is far to complex and more like a gallery. I found this script on dynamicdrive but it is quite old, it does what i'm after but and its a big but, i can't speed it up :-(

Does anybody know how i could increase the speed of the swipe from slide to slide on this? thanks

Ben

Code:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">

		/*
		Left-Right image slideshow Script-
		By Dynamic Drive (www.dynamicdrive.com)
		For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
		*/
		
		///////configure the below four variables to change the style of the slider///////
		//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
		var scrollerwidth='800px'
		var scrollerheight='300px'
		var scrollerbgcolor=''
		//3000 miliseconds=3 seconds
		var pausebetweenimages=3000
		
		
		//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
		var slideimages=new Array()
		slideimages[0]='<a href="#"><img src="images/website-banner-1.jpg" border="0"></a>'
		slideimages[1]='<a href="#"><img src="images/website-banner-2.jpg" border="0"></a>'
		slideimages[2]='<a href="#"><img src="images/website-banner-3.jpg" border="0"></a>'
		//extend this list
		
		///////Do not edit pass this line///////////////////////
			 
		var ie=document.all
		var dom=document.getElementById
		
		if (slideimages.length>1)
		i=2
		else
		i=0
		
		function move1(whichlayer){
		tlayer=eval(whichlayer)
		if (tlayer.left>0&&tlayer.left<=5){
		tlayer.left=0
		setTimeout("move1(tlayer)",pausebetweenimages)
		setTimeout("move2(document.main.document.second)",pausebetweenimages)
		return
		}
		if (tlayer.left>=tlayer.document.width*-1){
		tlayer.left-=5
		setTimeout("move1(tlayer)",50)
		}
		else{
		tlayer.left=parseInt(scrollerwidth)+5
		tlayer.document.write(slideimages[i])
		tlayer.document.close()
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move2(whichlayer){
		tlayer2=eval(whichlayer)
		if (tlayer2.left>0&&tlayer2.left<=5){
		tlayer2.left=0
		setTimeout("move2(tlayer2)",pausebetweenimages)
		setTimeout("move1(document.main.document.first)",pausebetweenimages)
		return
		}
		if (tlayer2.left>=tlayer2.document.width*-1){
		tlayer2.left-=5
		setTimeout("move2(tlayer2)",50)
		}
		else{
		tlayer2.left=parseInt(scrollerwidth)+5
		tlayer2.document.write(slideimages[i])
		tlayer2.document.close()
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move3(whichdiv){
		tdiv=eval(whichdiv)
		if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
		tdiv.style.left=0+"px"
		setTimeout("move3(tdiv)",pausebetweenimages)
		setTimeout("move4(scrollerdiv2)",pausebetweenimages)
		return
		}
		if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
		tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
		setTimeout("move3(tdiv)",5)
		}
		else{
		tdiv.style.left=scrollerwidth
		tdiv.innerHTML=slideimages[i]
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move4(whichdiv){
		tdiv2=eval(whichdiv)
		if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
		tdiv2.style.left=0+"px"
		setTimeout("move4(tdiv2)",pausebetweenimages)
		setTimeout("move3(scrollerdiv1)",pausebetweenimages)
		return
		}
		if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
		tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
		setTimeout("move4(scrollerdiv2)",5)
		}
		else{
		tdiv2.style.left=scrollerwidth
		tdiv2.innerHTML=slideimages[i]
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function startscroll(){
		if (ie||dom){
		scrollerdiv1=ie? first2 : document.getElementById("first2")
		scrollerdiv2=ie? second2 : document.getElementById("second2")
		move3(scrollerdiv1)
		scrollerdiv2.style.left=scrollerwidth
		}
		else if (document.layers){
		document.main.visibility='show'
		move1(document.main.document.first)
		document.main.document.second.left=parseInt(scrollerwidth)+5
		document.main.document.second.visibility='show'
		}
		}
		
		window.onload=startscroll
		
		</script>

</head>

<body>

<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
        <layer id="first" left=1 top=0 width=&{scrollerwidth}; >
        <script type="text/javascript">
        if (document.layers)
        document.write(slideimages[0])
        </script>
        </layer>
        <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
        <script type="text/javascript">
        if (document.layers)
        document.write(slideimages[1])
        </script>
        </layer>
        </ilayer>
        
        <script type="text/javascript">
        if (ie||dom){
        document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
        document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
        document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
        document.write(slideimages[0])
        document.writeln('</div>')
        document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
        document.write(slideimages[1])
        document.writeln('</div>')
        document.writeln('</div>')
        document.writeln('</div>')
        }
        </script>  

</body>

jmrker · 06-30-2011, 06:19 PM

I found this at: http://www.codingforums.com/showthread.php?t=228509
I modified it for my own needs, so you should be able to do so as well.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<!-- From: http://www.codingforums.com/showthread.php?t=228509 -->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #banner {
                display: none;
                position: relative;
                border: 3px solid black;
                overflow: hidden;
            }
            #imgContainer {
                position: absolute;
                top: 0px;
                left: 0px;
            }
            #imgContainer img{
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
                display: inline;
            }
        </style>
        <script type="text/javascript">
			var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
            var picPaths = [
				  '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
				  '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
				  '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
				  '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
				  '51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'
				];
            var step = 5;  //pixels
            var speed = 50; //milliseconds
            var slidePause = 1; //milliseconds
            var curPos = 0;
            var timer;
            function slideImages(){
                curPos -= step;
                if(curPos < -picWidth){ //finished moving left 1 image
                    clearTimeout(timer);
                    reOrderImgs();
                    imgContainerO.style.left = curPos +'px';
                } else { //continue sliding left
                    imgContainerO.style.left = curPos +'px';
                    timer = setTimeout(slideImages,speed);
                }
            }
            function reOrderImgs(){
                var childElems = imgContainerO.childNodes; //first child is a text node
                for(i=0; i < childElems.length; i++){
                    if(childElems[i].nodeName.toLowerCase() == 'img'){
                        var firstImgO = childElems[i];
                        i = childElems.length;
                    }
                }
                imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
                curPos = 0;
                setTimeout(slideImages,slidePause);
            }
            window.onload=function(){
                preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
                //preload the images
                picsO = new Array();
                for(i=0; i < preloadedImgs.length; i++){
                    picsO[i] = new Image();
                    picsO[i].src = preloadedImgs[i].src;
                }
                picWidth = picsO[0].width;
                picHeight = picsO[0].height;
                bannerO = document.getElementById('banner');
                imgContainerO = document.getElementById('imgContainer');
                imgContainerO.style.width = picWidth*picsO.length+'px';
                for(i=0; i < picsO.length; i++){
                    var newImg = document.createElement('img');
                    newImg.id = 'img_'+(i+1);
                    newImg.setAttribute('src',picsO[i].src);
                    imgContainerO.appendChild(newImg);
                }
                bannerO.style.height = picHeight+'px';
                bannerO.style.width = picsO[0].width+'px';
                bannerO.style.display = 'block';
                document.body.removeChild(document.getElementById('preloadedPics'));
                setTimeout(slideImages,500);
            }
        </script>

    </head>
    <body>
        <!-- preload the images so we can use their actual width and height property
             to scale the thumbnails -->
        <div id="preloadedPics" style="display: none"></div>
        <script type="text/javascript">
            for(i=0; i < picPaths.length; i++){
                var newImg = document.createElement('img');
                newImg.src = baseURL+picPaths[i];
                document.getElementById('preloadedPics').appendChild(newImg);
            }
        </script>
        <!-- --------------------End of image preloads ------------------ -->
        <div id="banner">
            <div id="imgContainer"></div>
        </div>

    </body>
</html>

Sciliano · 06-30-2011, 08:42 PM

davestroller:

See, Scrolling Banner Demo

Copy the files for yourself.