<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sl.aspx.cs" Inherits="sl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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>
<form id="form1" runat="server">
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide"><b>Welcome to SlideShow Image1</b> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbJSQXu7KKR0Hzi6yNQbX2KfGIhCEjk0PXLje00miKy9ct2hoDM_FgFRRKomPzL-HWYkpQaG3tWYiM4Ueoa7pu_MnKJjq8DiYCucAIgt3WR5aCcgOTokiVAEldEFD4rNoWwiuBAMJjYo/s450/SaveWater.jpg" /> </div>
<div class="slide"><b>Welcome to SlideShow Image2</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHZl2roj_rT2diq7avctX3uQYysmWUadNK92Xqi-6HX9UFP-Hfq0RWQPiRh0djCwMEh6SwPw8xNT1KvcSwdwK564vHwt9k1Q6Rh2dO0N4_1W0Tpe-hhPG-YZQ6LaAdtXOEBZf0rq7jX4/s300/Hopetoun_falls2.jpg" /> </div>
<div class="slide"><b> SlideShow Image3</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjceluti41-cR8-bwL_LmQbzy2QplV8GPPDfIboMu38GZOL0C4l5zYJOk0dk_2VojreVDRdghGVBy5cFdktyn5opBPEsvNFRZp3zbZsni9nzsCYuu4X1dqjXj5qHyoj2dmAcSIlklJ1NCI/s300/slideshowImage.jpg" /> </div>
</div>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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>
<form id="form1" runat="server">
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide"><b>Welcome to SlideShow Image1</b> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbJSQXu7KKR0Hzi6yNQbX2KfGIhCEjk0PXLje00miKy9ct2hoDM_FgFRRKomPzL-HWYkpQaG3tWYiM4Ueoa7pu_MnKJjq8DiYCucAIgt3WR5aCcgOTokiVAEldEFD4rNoWwiuBAMJjYo/s450/SaveWater.jpg" /> </div>
<div class="slide"><b>Welcome to SlideShow Image2</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHZl2roj_rT2diq7avctX3uQYysmWUadNK92Xqi-6HX9UFP-Hfq0RWQPiRh0djCwMEh6SwPw8xNT1KvcSwdwK564vHwt9k1Q6Rh2dO0N4_1W0Tpe-hhPG-YZQ6LaAdtXOEBZf0rq7jX4/s300/Hopetoun_falls2.jpg" /> </div>
<div class="slide"><b> SlideShow Image3</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjceluti41-cR8-bwL_LmQbzy2QplV8GPPDfIboMu38GZOL0C4l5zYJOk0dk_2VojreVDRdghGVBy5cFdktyn5opBPEsvNFRZp3zbZsni9nzsCYuu4X1dqjXj5qHyoj2dmAcSIlklJ1NCI/s300/slideshowImage.jpg" /> </div>
</div>
</div>
</form>
</body>
</html>
No comments:
Post a Comment