Image listing slide using Jquery and css in visual studio
1:- script are use in head tag
<script src="jquery-1.9.1.min.js"></script>
U
<script type="text/javascript">
$next = 1; // fixed, please do not modfy;
$current = 0; // fixed, please do not modfy;
$interval = 3000; // You can set single picture show time;
$fadeTime = 700; // You can set fadeing-transition time;
$imgNum = 8; // How many pictures do you have
$(document).ready(function () {
//NOTE : Div Wrapper should with css: relative;
//NOTE : img should with css: absolute;
//NOTE : img Width & Height can change by you;
$('.fadeImg').css('position', 'relative');
$('.fadeImg img').css({ 'position': 'absolute', 'width': '500px', 'height': '400px', 'margin': '350px', 'margin-top': '80px' });
nextFadeIn();
});
function nextFadeIn() {
//make image fade in and fade out at one time, without splash vsual;
$('.fadeImg img').eq($current).delay($interval).fadeOut($fadeTime)
.end().eq($next).delay($interval).hide().fadeIn($fadeTime, nextFadeIn);
// if You have 5 images, then (eq) range is 0~4
// so we should reset to 0 when value > 4;
if ($next < $imgNum - 1) { $next++; } else { $next = 0; }
if ($current < $imgNum - 1) { $current++; } else { $current = 0; }
};
</script>
2:-Use this line of code in body section
<div class="fadeImg" >
<img src="images/imes.jpg " />
<img src="images/11.jpg" style="display:none;"/>
<img src="images/12.jpg" style="display:none;"/>
<img src="images/13.jpg" style="display:none;"/>
<img src="images/14.jpg" style="display:none;"/>
<img src="images/15.jpg" style="display:none;"/>
<img src="images/16.jpg" style="display:none;"/>
<img src="images/17.jpg" style="display:none;"/>
</div>

No comments