超好用的jquery 焦点图插件实例

*{margin:0; padding:0;} 
img{ border:0;} 
ul, ol { list-style:none; } 
/*pptBox*/ 
.pptBox { position:relative; width:683px; height:272px; margin-bottom:10px; overflow:hidden; border:1px solid #dbdbdb; } 
.pptList li { display:none; } 
.pptList img { width:683px; height:272px; } 
.numBox { position:absolute; rightright:8px; bottombottom:14px; z-index:9999; width:88px; } 
.numBox li { float:left; display:inline; width:14px; height:14px; margin:0 6px 0 0; line-height:14px; color:#ff7e00; cursor:pointer; text-align:center; border:1px solid #ff6c00; background:#fff; } 
.numBox li.pptOn { background:#ff6c00; color:#fff; } 
.textBox { position:absolute; left:0; bottombottom:0; z-index:888; width:683px; height:44px; Opacity:0.7; filter: Alpha(Opacity=70); background:#000; overflow:hidden; } 
.textBox li { display:none; height:44px; padding:0 0 0 10px; line-height:44px; font-size:14px; font-weight:700; color:#fff; } 
 

](function() { 
$.fn.ppt = function(options) { 
var j = 1; 
var setting = { 
imgBox: "", 
turnBox: "", 
textsBox: "", 
maxNum: "", 
speed: "", 
autoRun:"" 
}; 
var _this = $(this); 
if (options) $.extend(setting, options); 
_this.find(setting.turnBox).each(function(i) { 
$(this).mouseover(function() { 
$(this).addClass("pptOn").siblings().removeClass("pptOn"); 
_this.find(setting.imgBox).eq(i).fadeIn().siblings().fadeOut(); 
$(this).parent().prev().find("li").eq(i).show().siblings().hide(); 
}); 
}); 
var myTime; 
if(setting.autoRun){ 
myTime = setInterval(function() { 
_this.find(setting.turnBox).eq(j).mouseover(); 
j++; 
if (j == setting.maxNum) { 
j = 0; 
}}, setting.speed); 
}else{ 
clearInterval(myTime); 
}; 
}; 
$("#pptBox01").ppt({ 
imgBox: ".pptList li", 
turnBox: ".numBox li", 
textsBox: ".textBox li", 
maxNum: "4", 
speed: "4000", 
autoRun:true 
}); 
});