How to create image slideshow using JavaScript

Опубликовано: 08 Январь 2015
на канале: kudvenkat

116,065

416

Link for all dot net and sql server video tutorial playlists
/ kudvenkat

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572

In this video, we will discuss creating a simple image slideshow using JavaScript. We will be using setInterval() and clearInterval() JavaScript methods to achieve this. We discussed these functions in detail in Part 34 of JavaScript Tutorial.

When you click "Start Slide Show" button the image slideshow should start and when you click the "Stop Slide Show" button the image slideshow should stop.

For the purpose of this demo we will be using the images that can be found on any windows machine at the following path.
C:\Users\Public\Pictures\Sample Pictures

At the above location, on my machine I have 8 images. Here are the steps to create the image slideshow using JavaScript.

Step 1 : Open Visual Studio and create a new empty asp.net web application project. Name it Demo.

Step 2 : Right click on the Project Name in Solution Explorer in Visual Studio and create a new folder with name = Images.

Step 3 : Copy the 8 images from C:\Users\Public\Pictures\Sample Pictures to Images folder in your project. Change the names of the images to 1.jpg, 2.jpg etc.

Step 4 : Right click on the Project Name in Solution Explorer in Visual Studio and add a new HTML Page. It should automatically add HTMLPage1.htm.

Step 5 : Copy and paste the following HTML and JavaScript code in HTMLPage1.htm page.
[img id="image" src="/Images/1.jpg" style="width: 150px; height: 150px" /]
[br /]
[input type="button" value="Start Slide Show" onclick="startImageSlideShow()" /]
[input type="button" value="Stop Slide Show" onclick="stopImageSlideShow()" /]
[script type="text/javascript"]
var intervalId;

function startImageSlideShow()
{
intervalId = setInterval(setImage, 500);
}

function stopImageSlideShow()
{
clearInterval(intervalId);
}

function setImage()
{
var imageSrc = document.getElementById("image").getAttribute("src");
var currentImageNumber = imageSrc.substring(imageSrc.lastIndexOf("/") + 1, imageSrc.lastIndexOf("/") + 2);
if (currentImageNumber == 8)
{
currentImageNumber = 0;
}
document.getElementById("image").setAttribute("src", "/Images/" + (Number(currentImageNumber) + 1) + ".jpg");
}
[/script]

Finally run the application and test it.

Смотрите видео How to create image slideshow using JavaScript онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь kudvenkat 08 Январь 2015, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 116,065 раз и оно понравилось 416 людям.

25,220,678

1.7 млн