Introduction:
Here I will explain how to create simple slideshow using jQuery or simple jQuery slideshow example inasp.net.
Description:
In previous articles I explained jQuery Add blinking effect to text, JavaScript generate random colors using setInterval function, Start and Stop timer in JavaScript, jQuery change textbox background color on focusand many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to create simple slideshow using jQuery in asp.net.
In previous articles I explained jQuery Add blinking effect to text, JavaScript generate random colors using setInterval function, Start and Stop timer in JavaScript, jQuery change textbox background color on focusand many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to create simple slideshow using jQuery in asp.net.
To implement this we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Simple Slideshow 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 #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 Aspdotnet-Suresh.com SlideShow Image1</b> <imgsrc="https://lh5.googleusercontent.com/-YRAs5XWsj3k/UROnzTJcTrI/AAAAAAAAD98/UIRWUOOwbsY/s450/SaveWater.jpg" /> </div>
<div class="slide"><b>Welcome to Aspdotnet-Suresh.com SlideShow Image2</b><imgsrc="https://lh3.googleusercontent.com/-CWFgJqYK0lo/UROnzXcKNiI/AAAAAAAAD94/H3zWwqQ03xk/s300/Hopetoun_falls2.jpg" /> </div>
<div class="slide"><b>Aspdotnet-Suresh.com SlideShow Image3</b><imgsrc="https://lh3.googleusercontent.com/-_tRUTe8jkiY/UROnzYKamnI/AAAAAAAAD-A/PBWOsc1ZrXg/s300/slideshowImage.jpg" /> </div>
</div>
</div>
</body>
</html>
|
Live Demo
For Live Demo check below slideshow
|
No comments:
Post a Comment