Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal Banner Slide

    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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb Something to consider...

    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>

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    davestroller:

    See, Scrolling Banner Demo

    Copy the files for yourself.


  •  

    Posting Permissions

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