Currently only add scroll and none of the effect, scroll is the effect of sliding, you can support the X and y direction of the slide; none is no effect, just show and hide, follow-up need to add other effects to do expansion, write a little water, oh, here to keep pen, to prevent loss.
Demo address:http://demo.jb51.net/js/2012/sinaapp/
Copy Code code as follows:
/**
* Big Mac Carousel
*/
$.fn.loopslider = function (option) {
var setting = {
Order of default display
Initindex:1,
The style added to the title node
ClassName: "Current",
Wheel seeding direction, by default to X axis rotation
Direct: "X",
Previous button
PREVBTN: "",
Next button
NEXTBTN: "",
Page up and down buttons disabled style
Btndisable: "Disable",
Button pressed style
Btntouchclass: "",
Automatic Wheel Seeding
Auto:false,
Auto-Carousel time interval
timeflag:4000,
Carousel Effect Time
SCROLLTIME:350,
Wheel-Seeding effect
Effect: "Scroll",
Whether to hide the slide button when there is only one carousel element
Hidebtn:true,
Whether to cycle the carousel
Cycle:true,
Container path for the content area of the carousel
Contentcontainer: "#imgScroll",
Nodes of the content area of the carousel
Contentchildtag: "Li",
Title The container path of the carousel area
Titlecontainer: "#titleScroll",
The node of the banner Carousel area
Titlechildtag: "Li",
Array of content areas for the carousel
Cont: [],
Array of the title area of the carousel
Tabs: [],
Current Carousel Serial Number
current:0,
Timer
PTR: "",
The carousel callback function, each time the carousel calls, the parameter is the current carousel ordinal
Callback:function () {
return true;
}
}
if (option) {
$.extend (setting, option);
}
Initializes a function of the current calling type
Setting.currentmethod = function () {
return true;
}
var boss = $ (this);
If it is not the first element to be first carousel
if (Setting.initindex!= 1) {
Setting.current = setting.initindex-1;
}
Get a list of the nodes of a carousel
var childlist = boss.find (Setting.contentcontainer + "" + Setting.contentchildtag);
Get a list of carousel header nodes
var titlelist = boss.find (Setting.titlecontainer + "" + Setting.titlechildtag);
Save the content area for each carousel node
Setting.cont = childlist;
Save the title of the Carousel node
Setting.tabs = titlelist;
If no carousel is required, return directly
if (Setting.cont.length = = 0) {
Return
}
To set the Index property for the content area and the 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;
}
Class
Doinit ();
if (childlist.length <= 1) {
Return
}
/**
* deal with the transition without effect
*/
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);
Log the currently displayed node
Setting.current = i;
Call callback function
Setting.callback (setting.current);
},
Init:function () {
Setting.currentmethod = Doscrollnone;
Bindevent ();
Automatic Wheel Seeding
if (Setting.auto) {
Processauto ();
}
The callback function is also invoked when initializing
Setting.callback (setting.current);
}
};
var doscrollxy = {
c_width:0,
c_height:0,
Init:function () {
Width of the carousel element
This.c_width = Childlist.width ();
Height of the Carousel element
This.c_height = Childlist.height ();
X-Axis Wheel Seeding
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;
Binding events
Bindevent ();
The callback function is also invoked when initializing
Setting.callback (setting.current);
Automatic Wheel Seeding
if (Setting.auto) {
Processauto ();
}
},
Process:function (i, Needfast) {
Setting.current = i;
Alert (i)
if (Setting.direct = = "X") {
Perform 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 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-i = Childs.eq (0). Remove ();
Node.append (a);
NODE.CSS (Direct, "0");
}
};
Switch (setting.effect) {
Case "None":
Doscrollnone.init ();
Break
Case "Scroll":
Doscrollxy.init ();
Break
}
Some of the 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);
}
}
Only one element and need to hide the button
if (childlist.length <= 1 && setting.hidebtn) {
Prevbtn.hide ();
Nextbtn.hide ();
}
Clones the first element to the last
if (Childlist.length > 1) {
var cloneNode = childlist.eq (0). Clone ();
Clonenode.attr ("index", counts);
Clonenode.appendto (childparent);
}
}
/**
* Bound Carousel Events
*/
function Bindevent () {
NEXTBTN && nextbtn.bind ("click",
function (event) {
If the button has been 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 = $ (e.target);
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 Events
function Handletouchstart (event) {
var element = $ (event.target);
Get title Node
while (Element[0].tagname!= childlist[0].tagname) {
element = Element.parent ();
}
if (Event.targetTouches.length = = 0) {
Return
}
var touch = event.targettouches[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 Slip Event
Childparent[0].ontouchmove = Handletouchmove;
function Handletouchmove (moveevent) {
var movetouch = moveevent.targettouches[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 slide the picture around the time, blocking the browser's default event, but if it is sliding up and down, generally sliding scroll bar, can not be directly blocked browser default events, otherwise it will cause users to slide up and down when the page stops the situation, This set is in the x-axis direction than in the y-axis of sliding at least 10 more pixels, can be effective to avoid this occurrence
if (Math.Abs (x)-Math.Abs (y) > 10) {
To block default events
Moveevent.preventdefault ();
Childparent.css ("Left", parsefloat (currentposition) + x);
Movedirect = x > 0? "Sub": "Add";
} else {
Return
}
} else {
Y-Axis scrolling
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;
}
Fingers off the screen
function Handletouchend () {
According to the direction of the finger movement, determine the next node number to display
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 handler 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 up 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);
}
Returns a function that, when called, returns a function that specifies the sequence number of the next picture that needs to be carousel. Generally used in the click of a small map, and then need to see the larger picture, then only need to bind a large map of the event, and then click on a small map only need to call the function, the corresponding serial number can be passed in
return function (index) {
if (Index < 0) {
index = 0;
else if (index >= counts) {
index = counts-1;
}
Setting.currentMethod.process (index);
}
}
