Description:-
in this example we explain how to create a Fancy slide show of an Image witout Refreshing the page using Jquery.
today in Every Application or in Every website we all show that Slide show of the Buisness relative Images are Displayed in Slide show. so you can easily create a Beautiful Slide show and put it in your Application.
in which we use the jquery fadeOut() and fadeIn() Function to move the image one by one from right to left and continuesoly display image from the bunch of image that we already set it in advance in design time.
Fancy Slideshow of Image Gallery in JQuery Slide Show in JQuery
Fancy and Beautiful Login Popup in JQuery SignUp and Login Popup in Jquery
Code For Slide Show:-
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript">
$("#slideshow
> div:gt(0)").hide();
setInterval(function () {
$('#slideshow
> div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideToggle("slow");
});
});
</script>
<title>YaMessaging - In House Messaging and Mailing System</title>
<style type="text/css">
#slideshow {
margin: 50px auto;
position: relative;
width: 300px;
height: 50px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#panel
{
text-align:center;
background-color:inherit;
border:solid 1px #c3c3c3;
border-color:Blue;
display:block;
width:100px;
height:50px;
position:absolute;
right:50px;
}
#panel
{
padding:50px;
display:none;
}
.b1
{
position:absolute;
right:20px;
top:100px;
}
.b2
{
position:absolute;
right:100px;
top:100px;
}
.im
{
position:absolute;
right:120px;
top:50px;
}
.s
{
list-style-image: url('online.png');
}
.z
{
position:absolute;
top: 20px;
left: 15px;
width: 16px;
height: 50px;
}
.style1
{
width: 100px;
height:50px;
vertical-align: top;
}
.t
{
background-color: White; border-color:Black;border-width:1px;border-style:solid;height:150px;width:150px; font-size: 11px; padding: 4px 4px 4px 4px;
}
</style>
</head>
<body>
<div id="slideshow">
<div>
<img src="1.jpeg" height="150" width="300" />
</div>
<div>
<img src="2.jpeg" height="50" width="300" alt="a" />
</div>
<div>
<img src="3.jpeg" height="50" width="300" alt="a" />
</div>
<div>
<img src="4.jpeg" height="50" width="300" alt="a" />
</div>
<div>
<img src="5.jpeg" height="50" width="300" alt="a" />
</div>
<div>
<img src="6.jpeg" height="50" width="300" alt="a" />
</div>
<div>
<img src="7.jpeg" height="50" width="300" alt="a" />
</div>
<div>
<img src="8.jpeg" height="50" width="300" alt="a" />
</div>
</div>
</body>
0 comments:
Post a Comment