Self-made jquery image switching plug-in imgslider V1.0

I have previously written a story about how to display an image with a magic lamp, which requires a lot of effort. Considering that there are many places where such a demand exists, it is better to encapsulate it and then develop it on your own, the imgslider plug-in came into being several days after it best met your needs. The descriptions are as follows:

1. There is no complex effect. All effects are moved from right to left.

More than 1.1 types of animation effects have been implemented and released on Google Code,

2. Provides the preview function and is translucent.

3. The new image description function appears together with the image display, that is, the title of the image, a brief introduction to the image, and a translucent dynamic display. See the example.

4. If you disable preview, a digital navigation is displayed.

5. This is the most time-consuming transformation, that is, the same page can have multiple elements to use this plug-in at the same time and switch between them, irrelevant interference

5.1 The cost is that all selectors are not IDs, but class names. If you are sure to put only one page, you can get my plug-ins back and change them slightly.

6. Because of the trouble of transformation, the image is not a link. If you click an image to jump to it, it is written in the onclick event of the image.

6.1 because the Moving position of each image is accurately calculated, the five images must be continuous and there is no interval. Many ides Process Code indentation into blank spaces that the browser can recognize, which will completely damage the effect, therefore, as in this example, the code of several images is consecutively spelled out without spaces. In addition, when the real release is established, the code is spelled out in the background, this completely avoids the possibility of blank space.

7. What to customize:

7.1 a div contains the required image

7.2 A Div contains the DIV above and uses this element to call the method.

7.3 In addition to the title, you must customize a Cont attribute, as shown in

8. The preview chart and digital navigation styles are not written in the plug-in, because they will display different styles according to different situations, which may vary widely, write the CSS of the two navigation controls as needed.

9. parameter description:

Code

 1 wrapname: 'img', // Class Name of the DIV that uniquely wraps all the slides in the window
2 wrapwidth: 351, // container width
3 wrapheight: 396, // container height
4 speed: 1000, // switching speed
5 interval: 5000, // switch Interval
6 arrposition:-403, // preview the initial position of the graph arrow
7 hidepreview: false, // hide the preview image. The digital navigation is displayed after the preview is hidden.
8 hidecaptial: false // hide the title/Introduction

10. Preview:

11. call:

11.1 HTML:

Code

In the first example, if you set the image container class name to imgb, you do not need to pass this parameter.
 <Div id = "fla_focus">
<Div class = "imgb">     
</Div>
</Div>
In the second example, the custom category must be input in the Parameter
<Div id = "slide2">
<Div class = "myname">      </div>
</Div>
</Div>

11.2 call example:

Code

 1 $ (function (){
2 $ ("# fla_focus"). imgslider (); // use the default value (the image container class name should be imgb; otherwise, the wrapname attribute must be passed in)
3 $ ("# slide2"). imgslider ({
4 hidepreview: True, // hide Preview
5 hidecaptial: True, // hide the title
6 wrapwidth: 696, // custom width
7 wrapheight: 241, // custom height
8 interval: 3000, // custom switching Interval
9 wrapname: "myname" // Class Name of the custom image container
10 });
11 });

11.3 CSS (equivalent to the class name specified in CSS, It is set in the plug-in, you cannot customize it, you just need to copy back the code)

11.4 JS (since the file is uploaded during the writing of this article, I will not post the Code any more. If you want to try it out, download it and try it)

12. Download the example. In addition, future updates are published on Google Code: https://imagesliderbywalker.googlecode.com/svn/trunk/

Or: http://code.google.com/p/imagesliderbywalker/downloads/list

13,

Note: Due to the rush in packaging, CSS has a lot of undeleted content, but it has been commented out. To keep the code concise, delete it on your own. In fact, the seven lines actually work.

To release the plug-in on a website, compress the plug-in.

If you have other questions, please reply or email me

 

14. v1.1.1 was updated on Google Code. It was tested mainly in IE6, but it was slightly defective. It was not significantly changed and did not work.