JavaScript Seamless full-screen carousel

Although usually can use plug-ins to achieve, but always feel, if even a seamless carousel can not write out, but also play a yarn;

Actually now really is playing the yarn, because the code is other people's, but well, soon becomes my!

The code is not encapsulated as a plugin, but I haven't figured it out yet.

There are a lot of comments below, if you think there is a mistake, please point to Ah, hard shot.

Html

<! DOCTYPE html>
 JS 
 
<script type= "text/javascript" >window.onload = function () {var index = 1;var B = false; var Timer;var wrap = document.getElementById (' wrap '), var list = document.getElementById (' list '); var prev = document.getElementById (' prev '); var next = document.getElementById (' next '); var buttons = document.getElementById (' Buttons '); var dots = document.getelementsbytagname (' span '); var width = list.getelementsbytagname (' img ') [0].width;var                Length = dots.length;//Initialization List.style.width = (length * width +2*width) + ' px '; Add index to span function Addindex () {for (i = 0; i < dots.length; i++) {dots[i].setattribute (' index '),        I+1); }} addindex ();//left and right button mouse slide into the display wrap.onmouseover = function () {prev.style.display = ' block '; next.style.display = ' Block '; stop ();};/ /left button mouse slide out hidden wrap.onmouseout = function () {Prev.style.display = ' none '; next.style.display = ' None ';p lay ();};/ /previous function previmg () {//prevents continuous scrolling from appearing bugif (b) {return;} Previous function slider (width);/index, pagination to Index--;if (Index < 1) {index = length;}            else if (Index > Length) {index = 1;} Pagination function pagination ();} Next function nextimg () {//prevents continuous scrolling from appearing bugif (b) {return;} Previous function slider (-width);//index, pagination used to Index++;if (Index < 1) {index = length;}            else if (Index > Length) {index = 1;} Pagination function pagination ();}            Previous, Next, trigger other functions change function btn (e) {if (b) {return;} Compatible FF,IEE = WINDOW.E | | E;var target = E.target?            E.target:e.srcelement;            if (target.nodeName.toLowerCase () = = ' span ') {var index1 = target.getattribute (' index ');                Gets the distance between the target index picture and the current picture var offset = (index-index1) * width;                slider (offset);                index = INDEX1;            Pagination ();            }}//Toggle core functions Function slider (offset) {b = true;            Completion time var = 500;            Time interval var inter = 5; RoomThe moving distance within the interval requires a priority limit, otherwise there will be problems (6/3/1) and (6/(3/1)) result var speed = Math.ceil (offset/(time/inter));            Distance after each exercise var left = parseint (list.style.left) + offset;            Motion function var go = function () {//current left var curleft = parseint (list.style.left); When the slide out is in the middle and left does not complete the animation if (Speed > 0 && curleft < left) | | (Speed < 0 && curleft > left))            {//Movement (according to speed, positive or negative, decide left and right direction) List.style.left =curleft + speed + ' px ';                                    Delay animation, whether the execution depends on the condition, that is, the distance from the return setTimeout (Go,inter);                    }//When at both ends of the else{//first perform the completion of the motion function List.style.left = left + ' px ';                    Depending on the left value, decide whether to reset left;                    When sliding to the right if (left <-(width * length)) {List.style.left =-width + ' px ';     }               When sliding to the leftmost else if (left >-width) {list.style.left =-(Width * length                    ) + ' px ';                    };            b = false;            };            };        Go ();                }; Bind DOM function addevent (element, event, listener) {//compatible Ff,ie if (element.addeventlistener) {E        Lement.addeventlistener (Event,listener,false);        }else{element.attachevent (' on ' +event,listener);        };                };        Trigger Click event Addevent (prev, ' click ', previmg);        Addevent (Next, ' click ', nextimg); Addevent (buttons, ' click ', BTN)//Paging functions function pagination () {//traverse span to find the currently lit span for (i = 0; i< dots.length;        i++) {if (Dots[i].classname = = ' Light ') {dots[i].classname = ';        Jump out of the loop, perform a function break after the loop;                };        };        Brightens the span index to the current index-1 (the index of the span starts at 0) Dots[index-1].classname = ' light ';     };   Auto-carousel function Play (dire,interval) {interval = interval | | 3000;            if (dire = = ' Left ') {timer = setinterval (previmg,interval);            }else{timer = setinterval (nextimg,interval);        }        };        Play (' Right ', 3000);        Terminates the Carousel function stop () {clearinterval (timer);        };  Full screen scrolling, picture centered; function Center () {var viewwidth = window.innerwidth | | document.documentElement.clientWidth | |        Document.body.clientWidth;            var imgwidth = width;            var poscenter = (imgwidth-viewwidth)/2;        Wrap.style.left =-poscenter + ' px ';        } window.onresize = center; };</script>
　　
JavaScript Seamless full-screen carousel