jquery Picture Carousel Plugin--front-end development must see _jquery

Remember when you used to touch the front end, browse the major sites, many of them have a carousel effect, at that time they are a thorough bottom of the small white, thinking of these pictures rolling up is really interesting, what makes these pictures in a direction of continuous scrolling. Later, slowly contact more, think these are so easy, then in order to deepen the understanding of JS, jquery and explore the implementation of various effects on the Web site, there is a jquery plug-in road such a series, of course, in order to commemorate the original rotation of the obsession, So on Gurney broadcast began to write a small plug-in, this is only a beginning, with more understanding behind, will also write some more gorgeous demo. Interested friends can go and see it.

First of all to attach an effect map, if you feel good, please refer to the implementation code

Okay, no more nonsense, the following code is attached.

HTML section:

<div class= "Slider" > <div class= "Ul-box" > <ul> <li><a href= "javascript:;" ></a></li> <li><a href= "javascript:;" ></a></li> <li><a href= "javascript:;" ></a></li> <li><a href= "javascript:;" ></a></li> <li><a href= "javascript:;" ></a></li> <li><a href= "javascript:;"
></a></li> </ul> </div> <div class= "Mask" ></div> <div class= "prev" ></div> <div class= "Next" ></div> </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 interval speed:500,//animation speed btnsize:20,///Bottom mask layer button size btnspace:10,//Bottom button clearance direction:1//Carousel direction defaults to 1, picture left to move}); </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 an instance object of jquery to a slider method var defaultsetting = {width:640, height : 270, during:3000, speed:500, btnsize:30, Btnspace:10, direction:1} setting = $.extend (True, {}, Defaultsettin g, setting); 
Replace the default setting with the passed in Parameter return This.each (function (i, item) {var _setinterval = Window.setinterval; Window.setinterval = function (callback, timer, param) {//rewrite setinterval functions so that it can be used to pass parameters to var args = Array.prototype.slice.call (a 
Rguments, 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,///To control the button's subscript flag = true,//////////////////////////////////////
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) {$ (item). CSS ({width:setting.btnSize, height:setting.btnSize, Top:setting.btnSpac E, Left:parseint (Setting.width-(setting.btnsize + setting.btnspace *2) *len, ten)/2 + setting.btnsize * i + SETTING.BT
Nspace * I * 2 + setting.btnspace}); $ (item). MouseEnter (function () {gap = Math.Abs (i-index); i > Index?
(Flag && ANI (1, GAP)): (Flag && ani (0, Gap));
})
});
Btnani (0); Button style Change function Btnani (index) {$ ('. Sliderbtn '). CSS (' background ', ' radial-gradient (white 20%, transparent 50%) '); $ (' . sliderbtn '). EQ (index). CSS (' background ', ' Radial-gradiENT (white 10%, transparent 30%, white 70%) '); }//Animation function ani (direction, num) {if (flag) {//default 1 movement left, 0 to right flag = false; var Ulfir = $ (' ul ', Ulbox). EQ (0);
= parseint (ulfir.css (' Margin-left '), 10); if (direction) {index = = num; index = index% len; left = Left-num * setting.width; Ulfir.animate ({marginleft:left}, S 
Etting.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 ({Marginle Ft:left}, Setting.speed, function () {if (left >= len * setting.width) {var ullast = $ (' ul ', Ulbox). EQ (2). Remove ();
Llast.css (' Margin-left ', 0);
Ulbox.prepend (Ullast);
Ulfir.css (' Margin-left ', 0);
} flag = True}} Btnani (Index)}//Timer 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 small series to introduce the jquery picture Carousel Plug-in Code, I hope to help you, if you have questions welcome to my message Small series will promptly reply to everyone, here also thank you for your support cloud Habitat community site!