==>>In this article I am posting how to rotate multiple div like a slide show . It's a basic functionality that is used mostly in various websites. So i explain how to rotate div In Asp .Net using JQuery.In the Previous Article post the New-Features-in-Visual-Studio-2013 will help you for increase knowledge .: -
First you Need to create a website that have a aspx page.
Then add a Div in the body that have multiple divs.
. Div
<div id="MainDv">
<div id="Div1" class="DvCss DvCssa">
div 1 Show now
</div>
<div id="Div2" class="DvCss">
div 2 Show now
</div>
<div id="Div3" class="DvCss">
div 3 Show now
</div>
</div>
After the add div in body need to write css and js .
Css.
<style type="text/css">
div
{
width: 100px;
height: 100px;
}
#MainDv
{
position: relative;
}
.DvCss
{
position: absolute;
top: 0;
left: 0;
display: none;
}
.DvCssa
{
display: block;
}
#Div1
{
background-color: Pink;
}
#Div2
{
background-color: Aqua;
}
#Div3
{
background-color: Fuchsia;
}
</style>
.JS
<script type="text/javascript" language="javascript">
$(window).load(function() {
var divs = $('.DvCss');
function fade() {
var current = $('.DvCssa');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
if (nextIndex >= divs.length) {
nextIndex = 0;
}
var next = divs.eq(nextIndex);
next.stop().fadeIn(2000, function() {
$(this).addClass('DvCssa');
});
current.stop().fadeOut(2000, function() {
$(this).removeClass('DvCssa');
setTimeout(fade, 2500);
});
}
fade();
})
</script>
.donot forgot add
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
No comments:
Post a Comment