炫意html5
最早CSS3和HTML5移动技术网站之一

超好用的焦点图插件

项目中有三个类似的焦图,就想着做个插件。说真的,还真是第一次写JQ的插件,虽然写的可能不好,大家可以路过,哈哈。所以发上来,自己mark下,以后回来再瞧~

结构:

<div class="pptBox" id="pptBox01">  
<ul class="pptList">  
<li style="display:block"><a href="#nogo"><img src="images/683x272.jpg" alt=" "></a></li>  
<li><a href="#nogo"><img src="images/1.jpg" alt=" "></a></li>  
<li><a href="#nogo"><img src="images/2.jpg" alt=" "></a></li>  
<li><a href="#nogo"><img src="images/3.jpg" alt=" "></a></li>  
</ul>  
<ul class="textBox">  
<li style="display:block">图解一</li>  
<li>图解二</li>  
<li>图解三</li>  
<li>图解四</li>  
</ul>  
<ul class="numBox">  
<li class="pptOn">1</li>  
<li>2</li>  
<li>3</li>  
<li>4</li>  
</ul></div>  

 

CSS代码:发现博客的高亮显示插件会把有些定位属性重复。大家明白就行!

*{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  
});  
});  

 

炫意HTML5 » 超好用的焦点图插件

(adsbygoogle = window.adsbygoogle || []).push({});
分享到:更多 ()

CSS3教程HTML5教程