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
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.im开发者_运维知识库age_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>
Choosing between two JS libraries is generally up to the specification and then preference. If you would like some help choosing with regards to specification you could try having a look here http://jqueryvsmootools.com/
I prefer jquery and have used this tutorial before which will help http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/
my current project isn't using jQuery at all but I still think you should at least know what it is and how to use the basics if you are into building web applications.
jQuery is so ubiquitous I think everyone should at least be familiar with the basics of it regardless of which library you decide to go with.
regarding your original slideshow question you can think of the html elements of your page as an array of elements / nodes. for example, as you add <img> elements to a <div class="slideshow"> container the items inside can be looped over directly.
see the sample below to see it in action...
http://jsfiddle.net/DaveAlger/eNxuJ/1/
you can make your own slide by using Transition then chance the position of the img element. i use hover for example only. you may use js to change the left position of the img element make some creative script for some awsome animations. you may also study animation and keyframes :D
<!DOCTYPE html>
<html>
<head>
<style>
#main {
position:absolute;
width: 100px;
height: 100px;
overflow: hidden;
}
#div1 {
position: absolute;
top: 0px;
left: -100px;
width: 95px;
height: 100px;
background: red;
-webkit-transition: left 2s; /* For Safari 3.1 to 6.0 */
transition: left 2s;
}
#div2 {
position: absolute;
top: 0px;
left: 0px;
width: 95px;
height: 100px;
background: yellow;
-webkit-transition: left 2s; /* For Safari 3.1 to 6.0 */
transition: left 2s;
}
#main:hover #div1{
left: 0px;
}
#main:hover #div2{
left: 100px;
}
</style>
</head>
<body>
<div id="main">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论