Image listing slide using Jquery and css in visual studio

output :-

 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