Pages

Friday 7 June 2013

How To Make Simple jQuery Image Slideshow Example with Text Overlay in c# Asp.Net

How To Make Simple jQuery Image Slideshow Example with Text Overlay in c# Asp.Net


Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Simple Slideshow with text overlay Example in Asp.net</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 {

position: relative;
}
#slideshow #slideshowWindow {
height: 257px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide {
height: 257px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide .slideText {
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 1</h2>
<p class="slideDes">fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 2</h2>
<p class="slideDes">fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 3</h2>
<p class="slideDes">fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
</div>
</div>
</body>
</html>



Live Demo:

jQuery Simple Slideshow with text overlay Example in Asp.net

Slide 1

fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

Slide 2

fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

Slide 3

fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

No comments:

Post a Comment