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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASKNPbyeeKwC9V_FupmEF69AiRLL4rTnwZGvFlaTZoupvDzhyphenhyphenuaNrmzL7WfgGXe_OLEadRqZMbuKOi4EiO9kgORlLZ6Ai3xqaq1t5LWLeeOpJBErAf4FxxvZzpo51_CI8_yE-TFdGHdc/s450/SaveWater.jpg" /> </div>
<div class="slide"><b>Welcome to fantasyaspnet.blogspot.in SlideShow Image2</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHdMz-IfE4QL3waFcuPWIx-fWBp8vedOQouTeJnMFrEwMbEQvGM4ii8eVB7wLAF8dGKvbi5XeIC5XHOB4zGEhyFV5TUrT2sbDVlaP7YKOiWFjiMaFuOFqYVPDbrUNncGlwLPWt1IUPZ8/s300/Hopetoun_falls2.jpg" /> </div>
<div class="slide"><b>fantasyaspnet.blogspot.in SlideShow Image3</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAu_Qgxk2Mt2TQypPDI82jOFfT-lazx0Fxk0QMn3ACnSNTcN4CdL6ou5NTFC1HWNSNhonWQ9kf5Sj2smGFgoBJ_1MF_jF4luaDP_BqTIalXWl2U1ZM4ojd2_rFW93r3tPvtT38ZxdMzuk/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

Asp.Net

Pages

Friday, 7 June 2013

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

No comments:

Post a Comment