jquery 焦点图插件使用说明及实例

作者：简简单单 2013-08-03

结构：

代码如下	复制代码
图解一图解二图解三图解四 1 2 3 4

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

jquery 焦点图插件使用说明及实例

相关文章

精彩推荐