结构：
| 代码如下 | 复制代码 |
| <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插件包，只提供焦点图效果代码。
时间： 2024-10-24 19:20:42