Pages

Friday, 7 June 2013

How To Make jQuery Slideshow Example Or jQuery Simple Image Slideshow Example in C# Asp.Net

How To Make jQuery Slideshow Example Or jQuery Simple Image Slideshow Example in C# Asp.Net


Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Slideshow</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var currentPosition = 0;
        var slideWidth = 500;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        setInterval(changePosition, 3000);
        slides.wrapAll('<div id="slidesHolder"></div>');
        slides.css({ 'float': 'left' });
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);
        function changePosition() {
            if (currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
            }
            else {
                currentPosition++;
            }
            moveSlide();
        }
        function moveSlide() {
            $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
        }
    });
</script>
<style type="text/css">
#slideshow #slideshowWindow
{
width:500px;
height:257px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide
{
margin:0;
padding:0;
width:500px;
height:257px;
float:left;
position:relative;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide"><b>Welcome to fantasyaspnet.blogspot.in SlideShow Image1</b> <img src="https://lh5.googleusercontent.com/-YRAs5XWsj3k/UROnzTJcTrI/AAAAAAAAD98/UIRWUOOwbsY/s450/SaveWater.jpg" /> </div>
<div class="slide"><b>Welcome to fantasyaspnet.blogspot.in SlideShow Image2</b><img src="https://lh3.googleusercontent.com/-CWFgJqYK0lo/UROnzXcKNiI/AAAAAAAAD94/H3zWwqQ03xk/s300/Hopetoun_falls2.jpg" /> </div>
<div class="slide"><b>fantasyaspnet.blogspot.in SlideShow Image3</b><img src="https://lh3.googleusercontent.com/-_tRUTe8jkiY/UROnzYKamnI/AAAAAAAAD-A/PBWOsc1ZrXg/s300/slideshowImage.jpg" /> </div>
</div>
</div>
</body>
</html>

Live Demo:

Simple Slideshow
Welcome to fantasyaspnet.blogspot.in SlideShow Image1
Welcome to fantasyaspnet.blogspot.in SlideShow Image2
fantasyaspnet.blogspot.in SlideShow Image3

No comments:

Post a Comment