OSDN!

JIL Mobile Widget: 我的第一堂课

OPhone平台开发, 2010-01-05 16:44:44

Tags : Widget 云端

前言

 

<script type="text/javascript" src="jquery.min.js"></script>

#home_slideshow {
       width: 180px;
}
#home_slideshow img {
    position:absolute;
    z-index:8;
    opacity:0.0;
}
#home_slideshow img.active {
    z-index:10;
    opacity:1.0;
}
#home_slideshow img.last-active {
    z-index:9;
    opacity:0.0;
}

<div id="home_slideshow">
<img src="http://www.jollen.org/consulting/1.jpg" width="240" alt="" class="active" />
<img src="http://www.jollen.org/consulting/ 2.jpg" width="240" alt="" />
<img src="http://www.jollen.org/consulting/ 3.jpg" width="240" alt="" />
</div>

<script type="text/javascript">
 
       function slideSwitch() {
              var $active = $('#home_slideshow img.active');
                    var $sibs = $active.siblings();
                    var rnd = Math.floor(Math.random() * $sibs.length );
                    var $next = $($sibs[rnd]);
 
              if ($active.length == 0) $active = $('#home_slideshow img:last');
              $active.addClass('last-active');
       
              $next.css({opacity: 0.0})
                     .addClass('active')
                     .animate({opacity: 1.0}, 1200, function() {
                            $active.removeClass('active last-active');
                     });
       }
       
       // Using jQuery
       $(function() {
              setInterval( "slideSwitch()", 5000 );
       });
       
</script>