Jquery-based image carousel tab switching component

Currently, only the effects of scroll and none are added. scroll is the sliding effect and supports moving in the x and y directions. none means no effect, but only display and hide, in the future, you need to add other effects for expansion. The writing is a little bit of water. Leave a pen here to prevent loss.
Demo Address: http://demo.jb51.net/js/2012/sinaapp/
Copy codeThe Code is as follows:
/**
* Big Mac carousel
*/
$. Fn. loopSlider = function (option ){
Var setting = {
// Default display order
InitIndex: 1,
// Style added to the title Node
ClassName: "current ",
// Carousel direction. The default value is carousel in the X axis direction.
Direct: "x ",
// The previous button
PrevBtn :"",
// The Next button
NextBtn :"",
// The disabled style of the up/down flip button
BtnDisable: "disable ",
// The style pressed by the button
BtnTouchClass :"",
// Automatic carousel
Auto: false,
// Automatic carousel Interval
Time flag: 4000,
// Carousel effect time
ScrollTime: 350,
// Carousel Effect
Effect: "scroll ",
// Hide the Slide button when there is only one carousel Element
HideBtn: true,
// Whether or not loop carousel
Cycle: true,
// Container path of the carousel content area
ContentContainer: "# imgScroll ",
// Nodes in the carousel content area
ContentChildTag: "li ",
// Container path of the title carousel Area
TitleContainer: "# titleScroll ",
// Node of the title carousel Area
TitleChildTag: "li ",
// The array of the carousel content area
Cont: [],
// The array of the carousel title Area
Tabs: [],
// Current carousel number
Current: 0,
// Timer
Ptr :"",
// Call the carousel callback function. The parameter is the serial number of the current carousel.
Callback: function (){
Return true;
}
}
If (option ){
$. Extend (setting, option );
}
// Initialize the function of the current call type
Setting. currentMethod = function (){
Return true;
}
Var boss = $ (this );
// If it is not the first element, carousel
If (setting. initIndex! = 1 ){
Setting. current = setting. initIndex-1;
}
// Obtain the carousel node list
Var childList = boss. find (setting. contentContainer + "" + setting. contentChildTag );
// Obtain the carousel title node list
Var titleList = boss. find (setting. titleContainer + "" + setting. titleChildTag );
// Save each carousel node in the content area
Setting. cont = childList;
// The carousel node that saves the title
Setting. tabs = titleList;
// If NO content needs to be carousel, return directly
If (setting. cont. length = 0 ){
Return;
}
// Set the index attribute for the content area and title Area
ChildList. each (function (index ){
$ (This). attr ("index", index );
TitleList. eq (index). attr ("index", index );
});
// Up and down arrows
Var nextBtn = boss. find (setting. nextBtn );
Var prevBtn = boss. find (setting. prevBtn );
// Length
Var counts = childList. length;
// The parent node of the carousel container
Var childParent = childList. parent ();
Var titleParent = titleList. parent ();
If (childList. length <setting. initIndex ){
Setting. current = 0;
}
// Initialization
DoInit ();
If (childList. length <= 1 ){
Return;
}
/**
* Ineffective Switching
*/
Var doScrollNone = {
Process: function (I ){
ChildList.eq( I ).css ("display", "block" ..siblings().css ("display", "none ");
TitleList. eq (I). addClass (setting. className). siblings (). removeClass (setting. className );
// Record the currently displayed Node
Setting. current = I;
// Call the callback function
Setting. callback (setting. current );
},
Init: function (){
Setting. currentMethod = doScrollNone;
BindEvent ();
// Automatic carousel
If (setting. auto ){
ProcessAuto ();
}
// Call the callback function during initialization.
Setting. callback (setting. current );
}
};
Var doScrollXY = {
C_width: 0,
C_height: 0,
Init: function (){
// The width of the carousel Element
This. c_width = childList. width ();
// The height of the carousel Element
This. c_height = childList. height ();
// Carousel in the X axis
If (setting. direct = "x "){
ChildParent. width (this. c_width * (childList. length> 1? Counts + 1: counts ));
ChildParent.css ("left",-this. c_width * (setting. current ));
} Else {
ChildParent. height (this. c_height * (childList. length> 1? Counts + 1: counts ));
ChildParent.css ("top",-this. c_height * (setting. current ));
}
TitleList. eq (setting. current). addClass (setting. className). siblings (). removeClass (setting. className );
Setting. currentMethod = doScrollXY;
// Bind events
BindEvent ();
// Call the callback function during initialization.
Setting. callback (setting. current );
// Automatic carousel
If (setting. auto ){
ProcessAuto ();
}
},
Process: function (I, needFast ){
Setting. current = I;
// Alert (I)
If (setting. direct = "x "){
// Execute effect Animation
ChildParent. animate ({
Left: "-" + (this. c_width * I)
},
(NeedFast? 50: setting. scrollTime ),
Function (){
If (setting. current = counts ){
DoScrollXY. processMove ("left", $ (this ));
}
If (setting. auto ){
ProcessAuto ();
}
});
} Else {
ChildParent. animate ({
Top: "-" + (this. c_height * I)
},
(NeedFast? 50: setting. scrollTime ),
Function (){
If (setting. current = counts ){
DoScrollXY. processMove ("top", $ (this ));
}
If (setting. auto ){
ProcessAuto ();
}
});
}
If (I = counts ){
I = 0;
}
// Call the callback function
Setting. callback (setting. current );
TitleList. eq (I). addClass (setting. className). siblings (). removeClass (setting. className );
},
ProcessMove: function (direct, node ){
Var childs = node. children ();
For (var I = 1; I <childs. length-1; I ++ ){
Var removeNode = childs. eq (I). remove ();
Node. append (removeNode );
}
Var first = childs. eq (0). remove ();
Node. append (first );
Node.css (direct, "0 ");
}
};
Switch (setting. effect ){
Case "none ":
DoScrollNone. init ();
Break;
Case "scroll ":
DoScrollXY. init ();
Break;
}
// Some initialization operations
Function doInit (){
ChildParent.css ("position", "relative ");
If (! Setting. cycle ){
PrevBtn. removeClass (setting. btnDisable );
NextBtn. removeClass (setting. btnDisable );
If (setting. current = 0 ){
PrevBtn. addClass (setting. btnDisable );
}
If (setting. current = counts-1 ){
NextBtn. addClass (setting. btnDisable );
}
}
// There is only one element and the button needs to be hidden
If (childList. length <= 1 & setting. hideBtn ){
PrevBtn. hide ();
NextBtn. hide ();
}
// Clone the first element to the end
If (childList. length> 1 ){
Var cloneNode = childList. eq (0). clone ();
CloneNode. attr ("index", counts );
CloneNode. appendTo (childParent );
}
}
/**
* Bind a carousel event
*/
Function bindEvent (){
NextBtn & nextBtn. bind ("click ",
Function (event ){
// If the button is disabled
If ($ (this). hasClass (setting. btnDisable )){
Return;
}
Var cur = setting. current;
If (cur> = 0 ){
PrevBtn. removeClass (setting. btnDisable );
}
If (cur = counts-2 &&! Setting. cycle ){
$ (This). addClass (setting. btnDisable );
}
If (cur = counts ){
Setting. current = 1;
} Else if (cur = counts-1 ){
// Carousel to the last one
Setting. current = counts;
} Else {
Setting. current = cur + 1;
}
If (setting. ptr ){
ClearInterval (setting. ptr );
Setting. ptr = null;
}
$ (This). addClass (setting. btnTouchClass );
Setting. currentMethod. process (setting. current );
});
PrevBtn & prevBtn. bind ("click ",
Function (){
If ($ (this). hasClass (setting. btnDisable )){
Return;
}
Var cur = setting. current;
If (cur <= counts-1 ){
NextBtn. removeClass (setting. btnDisable );
}
If (cur = 1 &&! Setting. cycle ){
$ (This). addClass (setting. btnDisable );
}
Setting. current = cur = 0? Counts-1: cur-1;
If (setting. ptr ){
ClearInterval (setting. ptr );
Setting. ptr = null;
}
$ (This). addClass (setting. btnTouchClass );
Var fast = false;
If (cur = 0 ){
Fast = true;
}
Setting. currentMethod. process (setting. current, fast );
});
TitleParent & titleParent. bind ("click ",
Function (e ){
Var element = values (e.tar get );
// Get the carousel Node
While (element [0]. tagName! = TitleList [0]. tagName ){
Element = element. parent ();
}
If (setting. ptr ){
ClearInterval (setting. ptr );
Setting. ptr = null;
}
Var index = parseInt (element. attr ("index"), 10 );
If (index! = 0 ){
PrevBtn. removeClass (setting. btnDisable );
} Else if (! Setting. cycle ){
PrevBtn. addClass (setting. btnDisable );
}
If (index! = Counts-1 ){
NextBtn. removeClass (setting. btnDisable );
} Else if (! Setting. cycle ){
NextBtn. addClass (setting. btnDisable );
}
Setting. currentMethod. process (index );
});
ChildParent [0]. ontouchstart = handleTouchStart;
// Touch screen event
Function handleTouchStart (event ){
Var element = parameters (event.tar get );
// Obtain the title Node
While (element [0]. tagName! = ChildList [0]. tagName ){
Element = element. parent ();
}
If (event.tar getTouches. length = 0 ){
Return;
}
Var touch = event.tar getTouches [0];
Var startX = touch. pageX;
Var startY = touch. pageY;
Var moveDirect = "";
Var currentPosition = setting. direct = "x "? ChildParent.css ("left"): childParent.css ("top ");
If (setting. ptr ){
ClearInterval (setting. ptr );
Setting. ptr = null;
}
// Finger slide event
ChildParent [0]. ontouchmove = handleTouchMove;
Function handleTouchMove (moveEvent ){
Var movetouch = moveEvent.tar getTouches [0];
If (setting. direct = 'X '){
Var moveX = movetouch. pageX;
Var moveY = movetouch. pageY;
Var x = moveX-startX;
Var y = moveY-startY;
// The purpose here is to stop the default events of the browser when sliding the image between the left and right sides. However, if it is sliding up or down, it is generally to slide the scroll bar and cannot directly block the default events of the browser, otherwise, the page will stop when the user slides up or down. Here, the setting is at least 10 pixels more than sliding in the Y axis direction, which can effectively avoid the above situation.
If (Math. abs (x)-Math. abs (y)> 10 ){
// Block default events
MoveEvent. preventDefault ();
ChildParent.css ("left", parseFloat (currentPosition) + x );
MoveDirect = x> 0? "Sub": "add ";
} Else {
Return;
}
} Else {
// Scroll in the Y axis
MoveEvent. preventDefault ();
Var moveY = touch. pageY;
Var y = moveY-startY;
ChildParent.css ("top", parseFloat (currentPosition) + y );
MoveDirect = y> 0? "Sub": "add ";
}
ChildParent [0]. ontouchend = handleTouchEnd;
}
// Exit the screen with your fingers
Function handleTouchEnd (){
// Determine the number of the next node to be displayed based on the movement of the finger
Var fast = false;
If (moveDirect = "add "){
If (setting. current = counts ){
Setting. current = 1;
} Else {
Setting. current = setting. current + 1;
}
} Else {
If (setting. current = 0 ){
Setting. current = counts-1;
Fast = true;
} Else {
Setting. current = setting. current-1;
}
}
// Call the corresponding processing function
Setting. currentMethod. process (setting. current, fast );
ChildParent [0]. ontouchend = null;
ChildParent [0]. ontouchmove = null;
}
}
}
/**
* Automatic carousel
*/
Function processAuto (){
If (setting. ptr ){
ClearInterval (setting. ptr );
Setting. ptr = null;
}
// Set the carousel Timer
Setting. ptr = setInterval (function (){
If (setting. current = counts ){
Setting. current = 1;
} Else if (setting. current = counts-1 ){
// Carousel to the last one
Setting. current = counts;
} Else {
Setting. current = setting. current + 1;
}
Var index = setting. current;
If (index! = 0 ){
PrevBtn. removeClass (setting. btnDisable );
} Else if (! Setting. cycle ){
PrevBtn. addClass (setting. btnDisable );
}
If (index! = Counts-1 ){
NextBtn. removeClass (setting. btnDisable );
} Else if (! Setting. cycle ){
NextBtn. addClass (setting. btnDisable );
}
Setting. currentMethod. process (setting. current );
},
Setting. timeFlag );
}
// Return a function. You can call the return function to specify the sequence number of the next image to be carousel. This function is generally used when you click a small image and then need to view the large image, then you only need to bind a carousel event to the big image, and then click a small image, you only need to call this function and pass in the corresponding sequence number.
Return function (index ){
If (index <0 ){
Index = 0;
} Else if (index> = counts ){
Index = counts-1;
}
Setting. currentMethod. process (index );
}
}