JS's Seamless carousel diagram

Html

<! DOCTYPE html>
　　
Common.js
   /* Buffered Motion obj: Moving object target: Object of motion properties and end value fn: callback function ratio: Motion factor, default value is 8*/function buffermove (obj,target,fn,ratio) { var ratio = Ratio | |    8;    Clearinterval (Obj.timer);        Obj.timer = setinterval (function () {var Allok = true;            for (var attr in target) {var cur = 0;            if (attr = = = ' opacity ') {cur = parseint (GetStyle (obj, ' opacity ') * 100);            } else{cur = parseint (GetStyle (obj,attr));            } var speed = (target[attr]-cur)/ratio; Speed = speed > 0?            Math.ceil (Speed): Math.floor (speed);            var next = cur + speed;                if (attr = = = ' opacity ') {obj.style.opacity = next/100;            Obj.style.filter = ' alpha (opacity = ' + next + ') ';            } else{Obj.style[attr] = next + ' px ';            } if (next!== target[attr]) {Allok = false; }} if (Allok) {clearinterval (obJ.timer);            if (FN) {fn (); }}},50);}    *//Gets the current style value//*/function getStyle (obj, attr) {if (Obj.currentstyle) {return obj.currentstyle[attr];    } else {return getComputedStyle (obj, false) [attr]; }}//Multi-attribute function encapsulation//package get style functions//function GetStyle (obj,attr) {//if (Obj.currentstyle) {//return obj.currents tyle[attr];//} else {//return getComputedStyle (obj,false) [attr];//}//}//Encapsulation class name get Functio n Byclassname (sclassname) {if (document.getelementsbyclassname) {return Document.getelementsbyclassname (s        ClassName);            } else {var all = document.getElementsByTagName (' * ');            var result = []; for (var i = 0;i <all.length;i++) {if (All[i].classname = = = Sclassname) {Result.push (al                L[i]);        }} return result; }}carousel.js//gets the elements of two click events var obtn = byclassnAme (' direction-btn ') [0],//get large box Ocarousel = Byclassname (' Carousel ') [0],//get the storage image of UL ocarousellist = Byclassna Me (' carousel-list ') [0],//gets ul under the Li Ocarouselli = ocarousellist.children,//Gets the previous click button Oprev = Byclassname (' Pre V ') [0],//Get Next click button Onext = Byclassname (' Next ') [0],//record image Subscript index = 0;//define point subscript Dotindex = 0;//Define constant graph The width of the piece is const IPERW = 590;//defines the timer var timer = Null;var Odots = byclassname (' dots ') [0];var Odotsa = Array.from (odots.            children);//Traverse a Odotsa.foreach ((v,k) =>{v.onmouseover = function () {index = k;            Dotindex = k;            Buffermove (Ocarousellist,{left:-index * iperw});        Setdotclass ();        }}) function Setdotclass () {//Traverse each A-label odotsa.foreach (v = v.classname= ");//Right Side a judgment        if (Dotindex >= odotsa.length) {dotindex = 0;        }//left A to determine if (Dotindex < 0) {dotindex = odotsa.length-1;     }   Odotsa[dotindex].classname = ' active '; }//Add the first picture to the end ocarousellist.innerhtml + = ocarouselli[0].outerhtml;//Define the total width of the ul oCarouselList.style.width = Iperw *    Ocarouselli.length + ' px '; ocarousel.onmouseover = function () {clearinterval (timer); OBtn.style.display = ' block ';}    Ocarousel.onmouseout = function () {automove (); OBtn.style.display = ' None ';} Add Click event Onext.onclick = function () {rightMove ();}    function RightMove () {index++;    dotindex++;        if (index >= ocarouselli.length) {index = 1;    OCarouselList.style.left = ' 0px ';    } buffermove (Ocarousellist,{left:-index * iperw}); Setdotclass ();}    Add Left click event Oprev.onclick = function () {index--;    dotindex--;        if (Index < 0) {index = ocarouselli.length-2;    OCarouselList.style.left =-(ocarouselli.length-1) * iperw + ' px ';    } buffermove (Ocarousellist,{left:-index * iperw}); Setdotclass ();} AutoPlay automove (); function Automove () {timer = setinterval (function () {RightMove(); },3000);}
　　
CSS file
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0; padding:0;} body{font-family: "Mrcrosoft Yahei", Arial;} ul,ol{List-style:none;} a{Text-decoration:none;} img{Border:none;} body{background:lightblue;}.    carousel{width:590px;    height:340px;    margin:50px Auto;    Overflow:hidden; Position:relative;}. carousel-list{Position:absolute;}. Carousel-list li{Float:left;}. direction-btn{Display:none;}.    Direction-btn a{Position:absolute;    top:50%;    Margin-top: -30px;    width:30px;    line-height:60px;    Background:rgba (0, 0, 0,. 3);    Color: #fff;    font-size:30px; Text-align:center;}. prev {left:0;}. Next {right:0;}.    dots{Position:absolute;    Background:rgba (255,255,255,.4);    border-radius:12px;    width:72px;    left:0;    right:0;    bottom:10px;    margin:0 Auto;    font-size:0;    line-height:0; Padding:0 4px;}. Dots a{Display:inline-block;    width:10px;    height:10px;    border-radius:50%;    Background: #fff; Margin:6px 4px;}. Dots. active{background:red;}
　　
Change the picture to your own path
JS's Seamless carousel diagram