javascript slideshow
Ok this might sound stupid but I am suppose to Find a tutorial or code library (JQuery,Mootools) that allows you to create a JavaScript slideshow. Can someone please explain to me what is the different of JQuery and Mootools and what are they use for.Another I am not understand if I go find these places is it going to help me to do a slideshow. I already have one but my page is not working correct. Here is my code thanks for looking.I am also comfused about the <img name="javascriptslid" src="highway12.jpg" width=400 height=300 border=5px  align="middle"><br /> I put the highway12.jpg in there but is only giving me 1 picture and not the slideshow.
  




    <head>
     <title>Javascript Slideshow</title>
     <script language="javascript">
     <!--
    var interval = 1500;
    var randome_display = 0;
    var imageDir = "my_images/";
    var imageNum = 0;
    var totalImages = imageArrays.length;
    imageArray = new Array();
    ImageArray[imageNum++] = new imageItem(imageDir + "highway12.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "lighthouse.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "landscape.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "shore.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "seashore.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "roughwaters.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "bigwave.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "sunset.jpg");
    function imageItem(image_loaction) {
	this.image_item = new Image();
	this.image_item.src = omage_loaction;
     }

    function get_ImageItemLoacation(imageObj) {
	return(imageObj.image_item.src)
      }

    function randNum(x ,y) {
	var range = y - x + 1;
	return Math.Floor(Math.random() * range) + x
       }
    function getNextImage() {
	if(random_display) {
	imageNum = randNum(0, totalImages-1);
      }
     else {
	imageNum = (imageNum+1) % totalImages;
      }
     var new_image = get_ImageItemLaction(imageArray[imageNum]);
      return(new_image);
        }

      function getPrevImage() {
	imageNum =(imageNum-1) % totalImages;
	var new_image = get_ImageItenLocation(imageArray[imageNum]);
	return(new_image);
         }

       function prevImage(place {
	var new_image = getPrevImage();
	document[place].src= new_image;
         }
     function switchImage(place) {
	var new_image = getNextImage();
	document[place].src =new_image;
	var recur_call = "switchImage(' "+place+"')';
	timerID =setTimeout(recur_call, interval);
         }
	
        //-->
        </script>

     </head>
     <body>
     <img name="javascriptslid" src="highway12.jpg" width=400 height=300 border=5px  align="middle"><br />


    <a href="#" onClick="switchImage('slideImg')">play slide show</a>
    <a href="#" onClick="clearTimeout(timerID)"> pause</a>
    <a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
    <a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
    </body>
    </html>



javascript slideshow
===

Ok this might sound stupid but I am suppose to Find a tutorial or code library (JQuery,Mootools) that allows you to create a JavaScript slideshow. Can someone please explain to me what is the different of JQuery and Mootools and what are they use for.Another I am not understand if I go find these places is it going to help me to do a slideshow. I already have one but my page is not working correct. Here is my code thanks for looking.I am also comfused about the <img name="javascriptslid" src="highway12.jpg" width=400 height=300 border=5px  align="middle"><br /> I put the highway12.jpg in there but is only giving me 1 picture and not the slideshow.
  




    <head>
     <title>Javascript Slideshow</title>
     <script language="javascript">
     <!--
    var interval = 1500;
    var randome_display = 0;
    var imageDir = "my_images/";
    var imageNum = 0;
    var totalImages = imageArrays.length;
    imageArray = new Array();
    ImageArray[imageNum++] = new imageItem(imageDir + "highway12.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "lighthouse.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "landscape.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "shore.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "seashore.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "roughwaters.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "bigwave.jpg");
    ImageArray[imageNum++] = new imageItem(imageDir + "sunset.jpg");
    function imageItem(image_loaction) {
	this.image_item = new Image();
	this.image_item.src = omage_loaction;
     }

    function get_ImageItemLoacation(imageObj) {
	return(imageObj.image_item.src)
      }

    function randNum(x ,y) {
	var range = y - x + 1;
	return Math.Floor(Math.random() * range) + x
       }
    function getNextImage() {
	if(random_display) {
	imageNum = randNum(0, totalImages-1);
      }
     else {
	imageNum = (imageNum+1) % totalImages;
      }
     var new_image = get_ImageItemLaction(imageArray[imageNum]);
      return(new_image);
        }

      function getPrevImage() {
	imageNum =(imageNum-1) % totalImages;
	var new_image = get_ImageItenLocation(imageArray[imageNum]);
	return(new_image);
         }

       function prevImage(place {
	var new_image = getPrevImage();
	document[place].src= new_image;
         }
     function switchImage(place) {
	var new_image = getNextImage();
	document[place].src =new_image;
	var recur_call = "switchImage(' "+place+"')';
	timerID =setTimeout(recur_call, interval);
         }
	
        //-->
        </script>

     </head>
     <body>
     <img name="javascriptslid" src="highway12.jpg" width=400 height=300 border=5px  align="middle"><br />


    <a href="#" onClick="switchImage('slideImg')">play slide show</a>
    <a href="#" onClick="clearTimeout(timerID)"> pause</a>
    <a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
    <a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
    </body>
    </html>


