jQuery淡入淡出幻灯片

Posted 2021-02-25

From a blog...

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
  // Every 5 seconds execute the switchSlide() function
  var playSlideshow = setInterval( "switchSlide()", 5000);
  $('.slideshow').hover(function(){
  	clearInterval(playSlideshow);
	},
	function(){
		playSlideshow = setInterval("switchSlide()",5000);
		});
});
// This function takes the first .slide element and put at the end
function switchSlide() {
  var slide = $('.slideshow li:first');
  slide.hide();
  $('.slideshow').append(slide);
  slide.fadeIn('slow');
}
</script>
<style type="text/css">
.slideshow {height: 269px;width: 140px;margin: 0;position: relative;list-style:none;}
.slideshow li {position: absolute;}
</style>
***
<ul class="slideshow">
<li><img src="images/1.gif"></li>
<li><img src="images/2.gif"></li>
<li><img src="images/3.gif"></li>
<li><img src="images/4.gif"></li>
<li><img src="images/5.gif"></li>
<li><img src="images/6.gif"></li>
</ul>