Structure:
| The code is as follows |
Copy Code |
<div class= "Pptbox" id= "pptBox01" >
<ul class= "Pptlist" >
<li style= "Display:block" ><a href= "#nogo" ></a></li >
<li><a href= "#nogo" ></a></li>
<li><a href= "#nogo" ></a></li>
<li><a href= "#nogo" ></a></li>
</ul>
<ul class= "TextBox" >
<li style= "Display:block" > Diagram one </li>
<li> diagram Two </li>
<li> Diagram III </li>
<li> diagram Four </li>
</ul>
<ul class= "Numbox" >
<li class= "Ppton" >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></div>
|
CSS code: Find the blog highlighting Plug-ins will be some positioning properties to repeat. Everybody knows it!
| The code is as follows |
Copy Code |
| *{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; }
|
Plug-in code:
| The code is as follows |
Copy Code |
| ] (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
});
}); |
Note: jquery code can be downloaded to the official website, there is no jquery plug-in package, only provide focus map effect code.
