最简单的 Jquery 幻灯片

Head Js

<script type="text/javascript">
    $(document).ready(function() {
		    var currentIndex = 0;
            var DEMO; 
            var currentID = 0; 
            var pictureID = 0; 
            $("#ifocus_piclist li").eq(0).show(); 
            autoScroll();
            $("#ifocus_btn li").hover(function() {
                StopScrolll();
                $("#ifocus_btn li").removeClass("current");
                $(this).addClass("current"); 
                currentID = $(this).attr("id"); 
                pictureID = currentID.substring(currentID.length - 1); 
                $("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); 
                $("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); 
                $("#ifocus_tx li").hide();
                $("#ifocus_tx li").eq(pictureID).show();

            }, function() {
                
                currentID = $(this).attr("id"); 
                pictureID = currentID.substring(currentID.length - 1); 
                currentIndex = pictureID;
                autoScroll();
            });
            function autoScroll() {
                $("#ifocus_btn li:last").removeClass("current");
                $("#ifocus_tx li:last").hide();
                $("#ifocus_btn li").eq(currentIndex).addClass("current");
                $("#ifocus_btn li").eq(currentIndex - 1).removeClass("current");
                $("#ifocus_tx li").eq(currentIndex).show();
                $("#ifocus_tx li").eq(currentIndex - 1).hide();
                $("#ifocus_piclist li").eq(currentIndex).fadeIn("slow");
                $("#ifocus_piclist li").eq(currentIndex - 1).hide();
                currentIndex++; currentIndex = currentIndex >= 3 ? 0 : currentIndex;
                DEMO = setTimeout(autoScroll, 3000);
            }
            function StopScrolll()
            {
                clearTimeout(DEMO);
            }
	});
    </script>

CSS style

#ifocus { width:680px; overflow:hidden; position:relative; height:240px;}
#ifocus_pic { display:inline; position:relative;float:left;width:680px; height:240px; overflow:hidden; margin:0px; }
#ifocus_piclist { position:absolute; }
#ifocus_piclist li { width:680px; height:240px; overflow:hidden; display:none}
#ifocus_piclist img { width:680px; height:240px;}
#ifocus_btn { display:inline; float:left; left:0px; width:100%; margin:0; position:absolute; bottom:0px;}
#ifocus_btn ul{width:682px; overflow:hidden;}
#ifocus_btn li { width:227px; float:left; height:20px; line-height:20px; font-weight:bold; background:#cccccc; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_btn .current { background: #ffffff; opacity:0.9; -moz-opacity:0.9; filter:alpha(opacity=90); }

Html 

<div class="l_flash_pic">
			<div id="ifocus">
				<div id="ifocus_pic">
					<div id="ifocus_piclist" style="left:0; top:0;">
						<ul>
							<li><a href="" target="_blank"><img width="680" height="240" src="images/center.jpg" alt="Banner 1" /></a></li>
							<li><a href="" target="_blank"><img width="680" height="240" src="images/02.jpg" alt="Banner 2" /></a></li>
							<li><a href="" target="_blank"><img width="680" height="240" src="images/03.jpg" alt="Banner 3" /></a></li>
						</ul>
					</div>
					
				</div>
				<div id="ifocus_btn">
					<ul>
						<li class="current" id="p0">Tab 1</li>
						<li id="p1">Tab 2</li>
						<li id="p2">Tab 3</li>
					</ul>
				</div>
			</div>	
		</div>