Jquery focus graph plug-in instructions and Examples

The focus chart plug-in is a good plug-in that often comes out of jquery. With it, we can quickly make a focus chart of various effects. I will introduce it below.

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"> Illustration 1 </li> <Li> Illustration 2 </li> <Li> Illustration 3 </li> <Li> figure 4 </li> </Ul> <Ul class = "numBox"> <Li class = "pptOn"> 1 </li> <Li> 2 </li> <Li> 3 </li> <Li> 4 </li> </Ul> </div>

 

CSS code: the blog highlight plug-in will repeat some positioning attributes. You can understand 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.ppt On {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 10px; line-height: 44px; font-size: 14px; font-weight: 700; color: # fff ;}

 

Plug-in code:

The Code is as follows:

Copy code

] $ (Function (){ 2.16.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" 2.16.ppt ({ ImgBox: ". pptList li ", TurnBox: ". numBox li ", TextsBox: ". textBox li ", MaxNum: "4 ", Speed: "4000 ", AutoRun: true }); });