JavaScript for seamless switching

 Original digest self of front-end blog, welcome everyone to visithttp://hacke2.github.io/
Cause

A year ago when writing Management College, then do the home page has a slide, because before the exchange, CL static page slide picture is in the background, let me write with JQ, at that time feel special gnawing dad, the picture written in the CSS. Good pit father, oneself again too lazy to change, can only bite the bullet with JQ write, a bunch of temporary variables, such as num++, all kinds of wonderful, finally added a JQ fade effect, on the end, the code as follows:

function Trim(s) {return s.Replace(/^\s*/, "").Replace(/\s*$/, "");}/*** Limit the number of words, the first to limit the classname, the second limit of the number of words* @author: WXL**/function Limittextnum(ClassName, Num) { var Limitnum = Num; $("."+ClassName+""). each(function () { var Curtext = $( This).text(); var Curlength = $( This).text().length; if (Curlength > Num) { Curtext = $( This).text(Curtext.substring(0, Limitnum) + ' ... '); } });}/*** Menu Folding* @author: WXL**/function Initmenu() { $(". Listarea").Hide(); $('. Listarea:first ').Show(); $(' #dynamic_list. List_title ').Click( function () { var checkelement = $( This).Next(); if ((checkelement. is(' div ')) && (checkelement. is(': Visible '))) { return false; } if ((checkelement. is(' div ')) && (!checkelement. is(': Visible '))) { $( This).Children("Div").Children("a").CSS("Background", "url (/content/images/home/ico. PNG) No-repeat left center "); $('. Listarea:visible ').prev("Div").Children("Div").Children("a").CSS("Background", "url (/content/images/home/ico2. PNG) No-repeat left center "); $('. Listarea:visible ').Slideup(' Fast '); checkelement.Slidedown(' Fast '); return false; } } );}/*** Picture Tumbling* @author WXL**/function Rollpictures() { var T = 0, Count; var Rollpics = $("#pictureArea Div").Slice(0, Index.Rollnewspicslength); Count = Rollpics.length - 1; Rollpics. not(': First ').Hide(); $("#pageStyle. PageUp").Click(function () { T--; if (T < 0) T = Count; if (T == Count) { $("#pictureArea Div").eq(0).Hide(); $("#pictureArea Div").eq(T).FadeIn("Slow"); } Else { $("#pictureArea Div").eq(T + 1).Hide(); $("#pictureArea Div").eq(T).FadeIn("Slow"); }}) $("#pageStyle. PageDown").Click(function () { T++; if (T > Count) T = 0; $("#pictureArea Div").eq(T).FadeIn("Slow"); if (T == 0) { $("#pictureArea Div").eq(Count).Hide(); } Else { $("#pictureArea Div").eq(T - 1).Hide(); }}) //Set a timer to roll the picture every three seconds setinterval(function () { $("#pageStyle. PageDown").Click(); }, the)}

View Rawcommon.js hosted with? by GitHub

These days a front-end QQ Group master shared a thing said peacetime can practice practiced hand, I did not do, but see he said, the group inside some people little things disdain to do, a little bit bigger there will not do I was feeling said I. I just wrote it and shared it with you.

Ideas

The key point is cloning, and deep cloning, Obj.clone (true), so that all child nodes of the node can be overcome. Cloning is selected because the direct deletion is too abrupt.

Generally seamless switching of slides is done this way

1. Click the previous: Clone the first node after the last node, then move the whole forward, and remove the element

2. Click on the next: Clone the last node to the front node money, then move the whole backwards, and remove the last element

Animated script for the Smart Club with animated effects

Code

Code on GitHub, interested to see:

JavaScript for seamless switching

View Full Demo

End

J

JavaScript for seamless switching