Make a few slide for yourself simple effect

Recently busy with graduation design, because usually I was backstage development, this front desk also want to do their own, like me the front desk design rotten to the dregs of the really won't love.

Just want to use to the homepage slide effect, oneself go online to learn a bit, below share my code.

The first is the simplest of two effects: swipe left and right, swipe up and down.

HTML code:

Next is the JS code:
$ (function () {//Initialize function C_slider (frame, list, Lframe, Llist, Forwardele, Backele, Scrolltype, Lscrolltype, Acitontype, autointerval) {this.frame = Frame;this.list = List;this. Lframe = Lframe;this. Llist = Llist;this.forwardele = Forwardele;this.backele = Backele;this.scrolltype = Scrolltype;this. Lscrolltype = Lscrolltype;this.acitontype = Acitontype;this.autointerval = Autointerval;this.slidelength = $ ("#" + this. Llist + "> li"). length;//total number of sliders This.currentslide = 0;//current this. Frameheight = $ ("#" + this.frame). Height (); Framewidth = $ ("#" + this.frame). width (); this.lframeheight = $ ("#" + this. lframe). Height (); this.lframewidth = $ ("#" + this. lframe). width (); this.llistheight = $ ("#" + this. Llist + ">li"). EQ (0). Outerheight (true); This.llistwidth = $ ("#" + this. Llist + ">li"). EQ (0). Outerwidth (True), var = this;for (var i = 0; i < this.slidelength; i++) {$ ("#" + This). Llist + "> li"). EQ (i). Data ("index", I); $ ("#" + this. Llist + "> li"). EQ (i). Bind (This.acitontYpe, function () {Self.go ((this). Data ("index"));};/ /Give "previous", "Next" button Add Action $ ("#" + This.forwardele). Bind (' click ', Function () {self.forward (); return false;}); $ ("#" + This.backele). Bind (' click ', Function () {self.back (); return false;}); /When the mouse is over, automatically rotates the processing $ ("#" + This.frame + ", #" + this. Lframe + ", #" + This.forwardele + ", #" + This.backele). Bind (' MouseOver ', function () {cleartimeout (self.autoext);}); $ ("#" + This.frame + ", #" + this. Lframe + ", #" + This.forwardele + ", #" + This.backele). Bind (' Mouseout ', function () {cleartimeout (self.autoext); Self.autoext = SetTimeout (function () {self.extinterval ();}, Self.autointerval);}); /start auto-Rotation this.autoext = setTimeout (function () {self.extinterval ();}, This.autointerval);} Execute Motion C_slider.prototype.go = function (index) {this.currentslide = index;if (This.scrolltype = = "Left") {$ ("#" + this.list). Animate ({marginleft: (-index*this. Framewidth) + "px"}, {duration:600, queue:false});} else if (This.scrolltype = = "Top") {$ ("#" + this.list). Animate ({margintop: (-index * this. Frameheight) + "px"}, {duration:600, queue:false});} $ ("#" + this.) Llist + "> li"). Removeclass ("cur"); $ ("#" + this. Llist + "> li"). EQ (index). addclass ("cur");//scroll for thumbnails if (this.  Lscrolltype = = "Left") {if (This.slidelength * this.llistwidth > This.lframewidth) {var spacewidth = (This.lframewidth- This.llistwidth)/2;var hiddenspace = this.llistwidth * THIS.CURRENTSLIDE-SPACEWIDTH;IF (HiddenSpace > 0) {if (Hidde Nspace + this.lframewidth <= this.slidelength * this.llistwidth) {$ ("#" + this. llist). Animate ({marginleft:-hiddenspace + "px"}, {duration:600, queue:false}); } else {var Endhidden = This.slidelength * this.llistwidth-this.lframewidth;$ ("#" + this. llist). Animate ({marginleft:-endhidden + "px"}, {duration:600, queue:false}); }} else {$ ("#" + this. llist). Animate ({marginleft: "0px"}, {duration:600, queue:false}); }}} and else if (this. Lscrolltype = = "Top") {if (This.slidelength * this.llistheight > This.lframeheight) {var spaceheight = ( This.lframeheighT-this.llistheight)/2;var hiddenspace = this.llistheight * THIS.CURRENTSLIDE-SPACEHEIGHT;IF (HiddenSpace > 0) {if (Hiddenspace + this.lframeheight <= this.slidelength * this.llistheight) {$ ("#" + this.) llist). Animate ({margintop:-hiddenspace + "px"}, {duration:600, queue:false}); } else {var Endhidden = This.slidelength * this.llistheight-this.lframeheight;$ ("#" + this. llist). Animate ({margintop:-endhidden + "px"}, {duration:600, queue:false});}} else {$ ("#" + this. llist). Animate ({margintop: "0px"}, {duration:600, queue:false});}}} Forward C_slider.prototype.forward = function () {if (This.currentslide < this.slidelength-1) {this.currentslide + = 1; This.go (this.currentslide);} else {this.currentslide = 0;this.go (0);}} Back C_slider.prototype.back = function () {if (This.currentslide > 0) {this.currentslide-= 1;this.go ( This.currentslide);} else {this.currentslide = This.slidelength-1;this.go (this.slidelength-1);}} Automatic execution of C_slider.prototype.extInterval = function () {if (This.currentslide < This.slidelength-1) {this.currentslide + = 1;this.go (this.currentslide);} else { This.currentslide = 0;this.go (0);} var self = This;this.autoext = SetTimeout (function () {self.extinterval ();}, This.autointerval);} Instantiated object var goSlide1 = new C_slider ("Big_frame", "Big_list", "Small_frame", "Small_list", "forward", "back", "left", "left" "," click "," N "), var goSlide2 = new C_slider (" Big_frame2 "," Big_list2 "," small_frame2 "," Small_list2 "," Forward2 "," back 2 "Top", "left", "click", "GoSlide3", var = new C_slider ("Big_frame3", "Big_list3", "Small_frame3", "Small_list3", "F Orward3 "," Back3 "," left "," Top "," click "," N "), var goSlide4 = new C_slider (" Big_frame4 "," Big_list4 "," Small_frame4 "," s Mall_list4 "," Forward4 "," Back4 "," Top "," Top "," click ", 2000);})

And finally the CSS code:
br {Clear:both;}. Frame {width:600px;height:240px;background-color: #CCC; overflow:hidden;}. Frame. list {list-style:none;padding:0;margin:0;width:10000px;}. Frame. list li {width:600px;height:240px;float:left;}. Frame #big_list2 {height:10000px;}. Frame #big_list2 li {clear:both;}. Frame #big_list4 {height:10000px;}. Frame #big_list4 li {clear:both;}. l_frame {width:260px;height:80px;background-color: #CCC; overflow:hidden;float:left;}. L_frame. list {list-style:none;padding:0;margin:0;width:10000px;}. L_frame. List Li {float:left;width:76px;height:76px;cursor:pointer;border:solid 2px #cc3910;}. L_frame. list. cur {border:solid 2px #FFFFFF;}. l_frame2 {height:208px;width:80px;background-color: #CCC; overflow:hidden;}. L_frame2. list {list-style:none;padding:0;margin:0;height:10000px;}. l_frame2. List Li {width:76px;height:76px;cursor:pointer;border:solid 2px #cc3910;}. l_frame2. list. cur {border:solid 2px #FFFFFF;}. Slide_nav {width:16px;height:80px;display:bLock;float:left;background-color: #2A0; text-indent: -10000px;}. slide_nav2 {width:80px;height:16px;display:block;background-color: #2A0; text-indent: -10000px;}

Because it is based on the jquery syntax written, so also to reference a file: jquery.js, download online.

Then the following:

The other is to put the switching column to the right, such as:

Later on the internet to learn another style, such as:


When you click to the right, there will be a dynamic effect, that is, the left side of the picture will be moved to the left, until disappeared in the left side of the browser, and then the right of the four images will be moved to a position on the left, at the far right of the browser will appear a new figure to reach the fifth position.

Make a few slide for yourself simple effect