I have seen a lot of users requesting for simple jQuery scripts for Image SlideShow Dealy with time duration.So, I am sharing with you all the wonderful jQuery slider. This code is full configured and awesome design for image slide code also deal with lightly weighted and fewer scripts. You can see a demo of design from below link and for your website just copy the code and replace images URL.
Image SlideShow Dealy:
If you have latest jquery then use else use below Google Jquery CDN:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Now copy below script for slideshow:
<script type="text/javascript">
$(function() {
var imgs = [
'http://lorempixel.com/output/nature-q-c-370-340-6.jpg',
'http://lorempixel.com/output/nature-q-c-370-340-2.jpg',
'http://lorempixel.com/output/city-q-c-370-340-4.jpg',
'http://lorempixel.com/output/city-q-c-370-340-6.jpg'];
var cnt = imgs.length;
var $imageSlide = $('img[id$=imageSlide]');
// set the image control to the last image
$imageSlide.attr('src', imgs[cnt-1]);
setInterval(Slider, 3000);
function Slider() {
$imageSlide.fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt])
.fadeIn("slow");
});
}
});
</script>
and your HTML part will be:
<img id="imageSlide" src="http://lorempixel.com/output/city-q-c-370-340-6.jpg"/>
Change red marked value as per your requirement.
Here simply we are using the JavaScript function which delays execution of the Slider function for a specific period of time, in above case 3000 milliseconds (3 seconds). If you want to pause the slideshow, use the clearInterval() function.
Note: Since the Slider function is first called after a 3 seconds delay, hence we explicitly set the image control source to the last image path in the array. If we do not do so, the user does not see an image for the first 3 seconds.
About UsFind out working team
AdverisementBoost your business at
Need Help?Just send us a
We are SocialTake us near to you,
2 comments: On Awesome Image SlideShow Dealy Using jQuery
I simply want to mention I am beginner to blogs and absolutely enjoyed this website. More than likely I’m likely to bookmark your website . You absolutely have exceptional article content. Cheers for sharing your website page.
Outstandingly insightful bless you, I believe your followers may possibly just want far more items such as this continue the superior hard do the job.