用jquery制作简易的幻灯片。原理都比较简单，主要是css样式控制和用setInterval设置定时器。下面是最简单的幻灯片代码，用jquery制作的。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } dl, dt, dd, ul, li { list-style:none; float:left } .article .ad-bg { background:url(../images/ad-bg.jpg) no-repeat; display:block; width:318px; height:264px; position:relative } .article .ad-bg .ad-cont { position: absolute; } .article .ad-bg .ad-cont li{position:absolute; left:0; top:0; display:none;} .article .ad-bg .ad-cont li.bl{ display:block;} .article .ad-bg .ad-num { position:absolute; bottom:6px; right:24px; } .ad-bg .ad-num li { color:#000; float:left; width:18px; line-height:18px; height:18px; text-align:center; border:1px solid #fff; background:#BDBDBD; cursor:pointer; margin-left:8px; } .ad-bg .ad-num .ks-active { background:#DD040E; color:#F3F2F2; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery制作简易幻灯片</title> <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text/javascript"> function autoFlide(){ var onimg=$('.ad-cont li.bl'); var onnumber=$('.ad-num li.ks-active'); var onimgnext=onimg.next(); var onnumbernext=onnumber.next(); if(!onnumbernext.html()){ onimgnext=$('.ad-cont li').eq(0); onnumbernext=$('.ad-num li').eq(0); }; onnumber.removeClass(); onnumbernext.addClass('ks-active'); $('.ad-cont li').removeClass(); onimgnext.addClass('bl'); onimg.fadeOut(100,function(){ onimgnext.fadeIn(200); }) } var time=5000; var autoslide=setInterval("autoFlide()",time) $(function(){ var adcont=$('.ad-cont li'); var adnum=$('.ad-num li'); adnum.each(function(i){ $(this).click(function(){ window.clearInterval(autoslide); if(!$(this).attr('class')){ adnum.removeClass(); $(this).addClass('ks-active'); $('.ad-cont li.bl').fadeOut(100,function(){ adcont.removeClass(); adcont.eq(i).fadeIn(200,function(){ $(this).addClass('bl'); }); }) }; }).hover(function(){ window.clearInterval(autoslide); },function(){ autoslide=setInterval("autoFlide()",time) }); }); }); </script> </head> <body> <div class="article"> <div class="ad-bg"> <ol class="ad-cont"> <li class="bl"> <a href=""><img src="images/aa.jpg" alt=""/></a> </li> <li> <a href=""><img src="images/bb.jpg" alt=""/></a> </li> <li> <a href=""><img src="images/cc.jpg" alt=""/></a> </li> </ol> <ul class="ad-num"> <li class="ks-active"> 1 </li> <li>2</li> <li>3</li> </ul> </div></div> </body> </html>
本文首发于：五指前端