Response title
This is preview!
Please help me with BASIC image slider
in Getting Started
•
10 years ago
Hi guys I am brand new to jquery and javascript.
I am trying to make a image slider for my home page, it doesnt need to have many functions (no need for pause when hovering over, or each seperate image to link) - I just need the div to slide through 3 images automatically over and over.
I have used for a image gallery, this image gallery has more functions (it has next and previous buttons, and a play and pause button)...I was hoping I will be able to use this same code and simplify it for what I need however, it is not simple for me....I GET PUZZLED! lol
Heres the image gallery code: (if you take a look perhaps you could let me know how to transfer it for what I need)
var num=0;
var picture;
var caption;
var play;
var pause;
var nextButton;
var prevButton;
var timer;
var images = [ *here I need to just have images...not the caption**
['images/ship1.jpg','SOUTHERN TIARE at Lyttelton 3 Oct 2004'],
['images/ship2.jpg','Sapphire Princess at anchor, Bay of Islands NZ, 5 Jan 2005'],
['images/ship3.jpg','P&O Nedlloyd Remuera departing Auckland 9 Feb 2003'],
['images/ship4.jpg','Paddle Steamer WAIMARIE, Wanganui River 1 March 2004'],
['images/ship5.jpg','THE WORLD at Auckland 14 February 2003'],
['images/ship6.jpg','HMNZS MONOWAI in Fiordland 1997'],
['images/ship7.jpg','Port Lyttelton New Zealand 3 Oct 2004']
];
window.onload = function() { **Here I just want it to autoplay the slideshow**
picture = document.getElementById('picture');
caption = document.getElementById('caption');
nextButton = document.getElementById('nextButton');
prevButton = document.getElementById('prevButton');
nextButton.onmousedown = slideshowNext;
prevButton.onmousedown = slideshowPrev;
play = document.getElementById('play');
pause = document.getElementById('pause');
document.getElementById("galleryContainer").className = 'show';
play.onmousedown = autoPlay;
pause.onmousedown = pauseButton;
};
function slideshow(slide) {
picture.src = images[slide][0];
caption.innerHTML = images[slide][1];
}
function slideshow(slide) {
$('#picture').fadeTo(500, .01);
setTimeout(function(){
picture.src = images[slide][0];
caption.innerHTML = images[slide][1];
$('#picture').fadeTo(500, 1);
}, 500);
}
function autoPlay() {
clearInterval(timer);
timer = setInterval(slideshowNext, 3000);
}
function pauseButton() {
clearInterval(timer);
}
function slideshowNext() {
num++;
num = num % images.length;
slideshow(num);
}
function slideshowPrev() {
num--;
if (num < 0) {
num=images.length-1;
}
num = num % images.length;
slideshow(num);
}
so I have tryed this:.....dont laugh!!!
var num=0;
var picture;
var caption;
var timer;
var images = [
['images/con1.jpg'],
['images/coin2.jpg'],
['images/coin3.jpg'],
];
window.onload = autoPlay;
function slideshow(slide) {
picture.src = images[slide][0];
caption.innerHTML = images[slide][1];
}
function slideshow(slide) {
$('#picture').fadeTo(500, .01);
setTimeout(function(){
picture.src = images[slide][0];
caption.innerHTML = images[slide][1];
$('#picture').fadeTo(500, 1);
}, 500);
}
function autoPlay() {
clearInterval(timer);
timer = setInterval(slideshowNext, 3000);
}
function slideshowNext() {
num++;
num = num % images.length;
slideshow(num);
}
Im guessing this will be simple, I just gotta do some more tutorials, in the mean time however any help would be gladly appreciated!!!
THANK YOU in advance :)
THANK YOU in advance :)
1