How to create an SlideShow of images on click using jquery?
To create an SlideShow of images on click using jquery we need to fist create an html page with image and some images in our folder as shown in below code.
<html>
<head>
<tittle> Slidshow</tittle>
<script src="jquery.min.js"></script>
<script src="coustom.js"></script>
</head>
<body>
<img class="play" src="img/button_play.png">
<img class="pause" src="img/button_pause.png">
<img class="slide" src="img/1.jpg">
</body>
</html>
In our above code we have three images one for Play, Pause and third is our image.Each image is given one class named as play, pause and slide respectively.
In the next step we create an custom.js file where we will give our js code which would be as followed.
Var d=1;
$(".play").click(function(){
$(".slide").attr('src', 'img/'+d+'.jpg');
i=parseInt(d) + 1;
t= setInterval(function(){
$(".slide").fadeOut(1000, function () {
$(".slide").attr('src', 'img/'+[i++]+'.jpg');
$(".slide").fadeIn(1000);
});
if(i == lastimgno)
i = 1;
}, 5000);
});
$(".pause").click(function(){
clearInterval(t);
});
In above js code we changed the source of the image on click of the class or we can say that on click of the image.
When we click on the play image we would get the slid show started where the images get changed after an interval of 5000 which means after 5 sec. This time can be changed according to your requirements.
And when we click on the pause image we distroy the interval set when we clicked on the play button.
Thats what the code is.
If it helped you than just make the comments. Any query please comment.
To create an SlideShow of images on click using jquery we need to fist create an html page with image and some images in our folder as shown in below code.
<html>
<head>
<tittle> Slidshow</tittle>
<script src="jquery.min.js"></script>
<script src="coustom.js"></script>
</head>
<body>
<img class="play" src="img/button_play.png">
<img class="pause" src="img/button_pause.png">
<img class="slide" src="img/1.jpg">
</body>
</html>
In our above code we have three images one for Play, Pause and third is our image.Each image is given one class named as play, pause and slide respectively.
In the next step we create an custom.js file where we will give our js code which would be as followed.
Var d=1;
$(".play").click(function(){
$(".slide").attr('src', 'img/'+d+'.jpg');
i=parseInt(d) + 1;
t= setInterval(function(){
$(".slide").fadeOut(1000, function () {
$(".slide").attr('src', 'img/'+[i++]+'.jpg');
$(".slide").fadeIn(1000);
});
if(i == lastimgno)
i = 1;
}, 5000);
});
$(".pause").click(function(){
clearInterval(t);
});
In above js code we changed the source of the image on click of the class or we can say that on click of the image.
When we click on the play image we would get the slid show started where the images get changed after an interval of 5000 which means after 5 sec. This time can be changed according to your requirements.
And when we click on the pause image we distroy the interval set when we clicked on the play button.
Thats what the code is.
If it helped you than just make the comments. Any query please comment.
very good
ReplyDelete