Dgallery more popular with button picture switching effect

The speed of the example is slow, and I'm website manger communication.

The main reason to write this code is because the frame itself does not have any buttons, think of the button now to switch the picture is still more popular so expand him, while doing a look at the original frame there is no problem

The code is basically about annotations.

The main reminder is that if you haven't read the first published Dgallery framework article

Can come here to understand the framework here's not much to say

No surprises. Support IE >=6.0, FF, Chrome, Safari and other browsers are basically not Stone age browsers.

What to communicate can be directly to the following I have a friend of human flesh tips I will reply or feel that this plug-in code is not good to use a BUG and so can communicate because I self-study JS and code norms generally with a little different from the mainstream.

The code is as follows

Copy Code

<script type= "Text/javascript" src= ". /jquery.js "></script> <script type= "Text/javascript" src= ". /dgallery.js "></script> <script> function Dpica () { Dgallery.call (this); Inheriting dgallery; var Btn_container; button container; var mybtn = new Array (); button var self = this; button and picture binding if the picture is displayed one then the button must be discolored; This is achieved with a focus method; var focus = function (BTN) { for (var i = 0; i < mybtn.length i + +) Mybtn[i].removeclass (' Focus '); Btn.addclass (' Focus '); } Because the init function is initialized in the original frame, he must be replaced and executed; Opt doesn't seem to have written anything but it has to be done. Because this init is not going to be executed automatically, he is executing the Jready function. So opt must have to write This._init = This.init; This.init = function (opt) { This._init (opt); This.getttieles () is a method in the original frame which is used directly in this. method to run; var title = This.gettitles (); The following is the creation of an object Btn_container = $ (' <ul class= ' dpica-list ' ></ul> '). Appendto (This.getcontainer ()); for (var i = 0; i < This.len (); i + +) { var t = $ (' <li> '). Appendto (Btn_container). attr (' index ', i); var a = $ (' <a href= "javascript:void (0);" ></a> '). html (title[i]!= null? Title[i]: (i + 1)). Appendto (t) Bind a method to display the target picture and change the button color (focus) When moving to the button; T.hover (function () { var me = $ (this); Self.stop (); Self.show (parseint) (me.attr (' index ')); Focus (me); }, function () { Left to continue in turns; Self.play (); }); & nbsp Mybtn.push (t); } Initializes the first button to focus; Focus (mybtn[0]); } Set default settings parameter Here you can refer to the Options property in the frame; This.setdefault ({ ' Play ': ' Auto ', ' effect ': ' fade ', ' Before ': function () { Before is important here because when you play it automatically Must change the picture and the button at the same time So when you change the picture, focus the button, so two of them will change at the same time. var cur = this.getnext (); Focus (Mybtn[cur]); } }) Jready This return must be written in this way please note; return This.jready (arguments); } CSS there is no good way to deal with this thing, so in the most original way document.write ... Note that the document.write function cannot be used in Jquey, so this cannot be written into any of my frames, otherwise there will be an error. document.write (' <style> '); document.write ('. Dpica-list{list-style:none;position:absolute;bottom:3px;right:10px;margin:0;padding:0;z-index : 999;} ' ); document.write ('. Dpica-list li{float:left;} '); document.write ('. dpica-list li A{width:16px;height:16px;display:block;line-height:16px;text-align:center; Font-family:tahoma, Geneva, Sans-serif;font-size:12px;font-weight:bold;color: #FFF; text-decoration:none; Background-color: #000; margin-left:4px;} ' ); document.write ('. Dpica-list li.focus a{background-color: #E91258;} '); document.write (' </style> '); I'm here to name him a dpica. If you like, you can change other names on top. Call his method as if with a method that directly invokes the frame. You can see the first chapter publish the frame article or read the source code directly; New Dpica (' #pic7, ' 6_1.jpg|6_2.jpg|6_3.jpg|6_4.jpg|6_5.jpg|6_6.jpg ', '. /image/'); </script> <body> <div id= "pic7″style=" width:900px;height:400px;margin:100px auto; " ></div> </body>