JQuery image carousel Plugin-mandatory for front-end development and mandatory for jquery

JQuery image carousel Plugin-mandatory for front-end development and mandatory for jquery

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. If you are interested, you can check it out.

I will attach it to you first. If you feel pretty good, please refer to the implementation code

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;}

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, param) {// rewrite s The etInterval function allows 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 timer; // timer _ this. width (setti Ng. 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 btnfor (var I = 0, str = ''; I <len; I ++) {str + = '<div class = "sliderBtn"> </div> '{}mask.html (str); var ulFir = u L. clone (true); var ulSec = ul. clone (true); var sliderBtn = $ ('. sliderBtn ','. mask'); ulBox. append (ulFir); ulBox. append (ulSec); sliderBtn. each (function (I, item) implements aggregate (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}); $ (I Tem). mouseenter (function () {gap = Math. abs (I-index); I> index? (Flag & ani (1, gap): (flag & ani (0, gap) ;}); btnAni (0 ); // function btnAni (index) shortcut certificate ('.sliderbtn'hangzhou.css ('background', 'radial-gradient (white 20%, transparent background ('background', 'radial-gradient (white 10%, transparent 30%, white 70%) ');} // animated function ani (direction, num) {if (flag) {// The default value is 1 to the left, 0 to the right movement flag = false; var ulfir = $ ('ul ', ulBox ). eq (0); var left = parseI Nt(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', substring ('margin-left', 01_ulbox.prepend(ullast1_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)

The above code is the jQuery image carousel plug-in Code introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner, thank you very much for your support for the help House website!