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

来源:转载

焦点图是很多项目开发中要用到的一个效果,听说jquery有不少焦点图插件效果,后来找了果然不少,下面我把我项目中用到的一款非常优的jquery焦点图插件效果给各位分享。

结构:

 代码如下 复制代码 <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 
}); 
}); 


注意:jquery代码大家可自行到官网下载了,这里不提供jquery插件包,只提供焦点图效果代码。




分享给朋友:
您可能感兴趣的文章:
随机阅读: