在网上下的图片幻灯展示，比较简单，功能比较单一，可以作为基础来学习。
script.js 文件
$(function(){ var slider={ num:-1, cur:0, cr:[], al:null, at:10*1000, ar:true, init:function(){ if(!slider.data || !slider.data.length) return false; var d=slider.data; slider.num=d.length; var pos=Math.floor(Math.random()*1);//slider.num); for(var i=0;i<slider.num;i++){ $('#'+d[i].id).css({left:((i-pos)*1000)}); $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>'); } $('img,div#slide-controls',$('div#slide-holder')).fadeIn(); slider.text(d[pos]); slider.on(pos); slider.cur=pos; window.setTimeout('slider.auto();',slider.at); }, auto:function(){ if(!slider.ar) return false; var next=slider.cur+1; if(next>=slider.num) next=0; slider.slide(next); }, slide:function(pos){ if(pos<0 || pos>=slider.num || pos==slider.cur) return; window.clearTimeout(slider.al); slider.al=window.setTimeout('slider.auto();',slider.at); var d=slider.data; for(var i=0;i<slider.num;i++) $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing'); slider.on(pos); slider.text(d[pos]); slider.cur=pos; }, on:function(pos){ $('#slide-nav a').removeClass('on'); $('#slide-nav a#slide-link-'+pos).addClass('on'); }, text:function(di){ slider.cr['a']=di.client; slider.cr['b']=di.desc; slider.ticker('#slide-client span',di.client,0,'a'); slider.ticker('#slide-desc',di.desc,0,'b'); }, ticker:function(el,text,pos,unique){ if(slider.cr[unique]!=text) return false; ctext=text.substring(0,pos)+(pos%2?'-':'_'); $(el).html(ctext); if(pos==text.length) $(el).html(text); else window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30); } }; });
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>jquery sliders</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/scripts.js"></script> </head> <body> <!--/top--> <div id="header"><div class="wrap"> <div id="slide-holder"> <div id="slide-runner"> <a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a> <div id="slide-controls"> <p id="slide-client" class="text"><strong>post: </strong><span></span></p> <p id="slide-desc" class="text"></p> <p id="slide-nav"></p> </div> </div> <!--content featured gallery here --> </div> <script type="text/javascript"> if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}]; </script> </div></div><!--/header--> </body> </html>