JQuery plug-in path (2) -- carousel and jquery Plug-In Path

JQuery plug-in path (2) -- carousel and jquery Plug-In Path

I still remember that when I first came into contact with the front-end, I browsed all the major websites and most of them had a carousel effect. At that time, I was a completely thorough hacker, it is really interesting to think about how to scroll these images in one direction. Later, I became more familiar with it and thought it was so easy. so in order to deepen my understanding of js and jQuery and explore the implementation methods of various effects on the website, there is a series like jQuery plug-in. Of course, to commemorate the original obsession with carousel, I wrote a small plug-in from carousel, which is just the beginning, as I learn more about it later, I will also write some more brilliant demos. The source code is here:Click here to get the codeIf you are interested, you can check it out. Okay, I don't have to talk about it anymore. The code is attached below.

HTML section:

 

<Div class = "slider"> <div class = "ul-box"> <ul> <li> <a href = "javascript :; ">  </a> </li> <a href = "javascript :; ">  </a> </li> <a href = "javascript :; ">  </a> </li> <a href = "javascript :; ">  </a> </li> <a href = "javascript :; ">  </a> </li> <a href = "javascript :; ">  </a> </li> </ul> </div> <div class = "mask"> </div> <div class = "prev">  </div> <div class = "next">  </div> <script src = "js/jquery-1.11.3.js"> </script> <script src = "js/slider. js "> </script> <script> $ ('. slider '). slider ({width: 640, height: 270, during: 2000, // animation execution interval speed: 500, // animation speed btnSize: 20, // button size of the bottom mask layer btnSpace: 10, // button gap at the bottom direction: 1 // The default direction of carousel is 1, and the picture is moved to the left}); </script>

 

CSS section:

* {Margin: 0; padding: 0; box-sizing: border-box ;}. slider {position: relative; overflow: hidden ;}. slider ul {list-style: none; float: left ;}. slider ul li {float: left ;}. slider. mask {position: absolute; bottom: 0; width: 100%; background-color: rgba (0, 0, 0 ,. 3 );}. slider. mask. sliderBtn {position: absolute; border-radius: 50%; background-color: # fff; cursor: pointer; background: radial-gradient (white 20%, transparent 50% );}. slider. prev ,. slider. next {position: absolute; width: 45px; height: 100%; background-color: rgba (0, 0, 0 ,. 2); cursor: pointer; top: 0; display: none ;}. slider. prev {left: 0 ;}. slider. next {right: 0 ;}. slider. prev img ,. slider. next img {position: absolute; top: 50%; left: 50%; margin-top:-22.5px; margin-left:-22.5px ;}View Code

JS section:

(Function ($) {$. fn. slider = function (setting) {// bind a slider method var defaultSetting = {width: 640, height: 270, during: 3000, speed: 500, btnSize: To the jQuery Instance Object: 30, btnSpace: 10, direction: 1} setting = $. extend (true, {}, defaultSetting, setting); // Replace the default return this with the input parameter. each (function (I, item) {var _ setInterval = window. setInterval; window. setInterval = function (callback, timer, par Am) {// rewrite the setInterval function so that it can pass the parameter var args = Array. prototype. slice. call (arguments, 2); var _ fn = function () {callback. apply (null, args);} return _ setInterval (_ fn, timer);} var _ this = $ (this), ulBox = $ ('. ul-box', this), ul = $ ('ul ', this), li = $ ('Li', ul), img = $ ('img ', li), len = li. size (), mask = $ ('. mask ', this), index = 0, // used to control the subscript flag of the button = true, // identify whether the animation is executed completely gap, // The Difference Between the subscript of the button that executes the animation and the lower mark of the current button ti Mer; // timer _ this. width (setting. width ). height (setting. height); ulBox. width (setting. width * 3 * len).height(setting.height).css ({marginLeft:-setting. width * len}); ul. width (setting. width * len ). height (setting. height); img. width (setting. width ). height (setting. height); mask. height (setting. btnSize + 2 * setting. btnSpace); // Add btn for (var I = 0, str = ''; I <len; I ++) {str + = '<div class =" sliderBtn "> </Div> ';} mask.html (str); var ulFir = ul. clone (true); var ulSec = ul. clone (true); var sliderBtn = $ ('. sliderBtn ','. mask'); ulBox. append (ulFir); ulBox. append (ulSec); sliderBtn. each (function (I, item) {detail (item).css ({width: setting. btnSize, height: setting. btnSize, top: setting. btnSpace, left: parseInt (setting. width-(setting. btnSize + setting. btnSpace * 2) * len, 10)/2 + setting. btnSize * I + Setting. btnSpace * I * 2 + setting. btnSpace}); $ (item). mouseenter (function () {gap = Math. abs (I-index); I> index? (Flag & ani (1, gap): (flag & ani (0, gap) ;}); btnAni (0 ); // function btnAni (index) {parameters ('.sliderbtn'hangzhou.css ('background', 'radial-gradient (white 20%, transparent 50%) '); parameters ('background ', 'radial-gradient (white 10%, transparent 30%, white 70%) ');} // animation function ani (direction, num) {if (flag) {// default value: 1: Left motion; 0: right motion: flag = false; var ulfir = $ ('ul ', ulBox ). eq (0); va R left = parseInt(ulfir.css ('margin-left'), 10); if (direction) {index + = num; index = index % len; left = left-num * setting. width; ulfir. animate ({marginLeft: left}, setting. speed, function () {if (left <=-len * setting. width) {ulfir = ulfir. remove (); ulfir.css ('margin-left', 0); ulBox. append (ulfir);} flag = true;});} else {index-= num; index = index <=-1? Len-1: index; left = left + num * setting. width; ulfir. animate ({marginLeft: left}, setting. speed, function () {if (left> = len * setting. width) {var ulLast = $ ('ul ', ulBox ). eq (2 ). remove (); ulLast.css ('margin-left', 0); ulBox. prepend (ulLast); ulfir.css ('margin-left', 0);} flag = true})} btnAni (index) }}// timer = setInterval (ani, setting. during, setting. direction, 1); _ this. hover (function () {$ ('. prev', this).css ('display', 'block'); $ ('. next ', this).css ('display', 'block'); clearInterval (timer) ;}, function () {$ ('. prev', this).css ('display', 'None'); $ ('. next ', this).css ('display', 'None'); timer = setInterval (ani, setting. during, setting. direction, 1) ;}) $ ('. next '). click (function () {flag & ani (1, 1) ;}) $ ('. prev '). click (function () {flag & ani (0, 1) ;})}) (jQuery)View Code

The above is almost all the code. Some of the key points have been commented out and will not be described here. If there are any bad things, I would like to tell you, thank you very much. I wrote it here today. It is not easy for the author to knock on the keyboard code. If you think you are more interested in this article, please move your right hand a little bit, click "like". Thank you! ^_^. The following is an attachment.