Jquery image slide switching effect code (1/2)

Source: Internet
Author: User

JQuery fade-in and fade-out can automatically switch the magic light plug-in. The prototype is a magic light effect written a few days ago, because a small bug gets stuck for two days, and then clears the previously written code, I have written a new thought.

Usage
1. Introduce the jquery library file and the jquery. ifadeslide. pack. webpage special effect plug-in file (if other js files exist on the page, merge them to reduce http requests), and introduce location customization;
Http://www.bKjia. c0m code is as follows:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<Script src = "js/jquery. ifadesldie. pack. js"> </script>

You do not need to introduce the style file. If you use the structure in the demo, you can directly merge the style into the project page. We recommend that you customize the style.
2. call the plug-in on the page and pass in the parameters of the switching element. If the parameters are null or not passed in, they are all executed according to the default parameters in the plug-in. for example, the following code calls three sets of slides in the demo:
Http://www.bKjia. c0m code is as follows:
$ (Function (){
// Sample-a call --- no parameters are input. The default parameters are called.
$ ('Div # slide'). ifadeslide ();
// Call sample-B --- Pass in a new parameter, which overwrites the original parameter. The default value is not used.
$ ('Div # slide_ B '). ifadeslide ({
Field: $ ('div # slide_ B '),
Icocon: $ ('div. ico_ B '),
Hovercls: 'High _ B ',
Curindex: 2, // the index value starts from 0. Therefore, set it to 3rd highlighted items.
Interval: 2000
});
// Call sample-c --- Pass in a new parameter, which overwrites the original parameter. The default value is not used.
$ ('Div # slide_c '). ifadeslide ({
Field: $ ('div # slide_c img '),
Icocon: $ ('div. ico_c '),
Outgoing time: 100,
Intime: 200.
});
});

Note: The plug-in calling part must be placed after the plug-in file reference.
Core code
Http://www.bKjia. c0m code is as follows:
; (Function ($ ){
$. Fn. extend ({
Ifadeslide: function (options ){
// Plug-in parameter initialization
Var iset = {
Field: $ ('div # slide img '), // switch Element Set
Icocon: $ ('div. ico '), // index container
Hovercls: 'high', // switch to the current index highlight Style
Curindex: 0, // the index value highlighted by default. The index value starts from 0.
Outtime: 200, // element fade-out time (MS)
Intime: 300, // elements fade-in time (MS)
Interval: 3000 // Element Switching interval (MS)
};
Options = options | {};
$. Extend (iset, options); // merge parameter objects. If options has a new value, it overwrites the corresponding value in iset. Otherwise, the default value is used.
// Generate the corresponding index value list based on the quantity of switching elements and insert it into the switching Area
Var ulcon = "<ul> ";
Iset. field. each (function (I ){
Ulcon = ulcon + '<li>' + (I + 1) + '</li> ';
});
Ulcon + = '</ul> ';
Iset. icocon. append (ulcon); 1 2

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.