JS Native Implementation Carousel

Two days ago, colleagues interviewed new people, let the scene write "Implementation of the Carousel." I think this thing seems I have not written Ah, in the side of the dark rubbing rubbing a piece of paper is also written in that, colleagues are puzzled!

There are many ways to do this, like, like, how to write it. I am here by modifying the IMG opacity style to achieve the control of IMG Explicit. IMG Carousel to that location, set the IMG style for that location, first opacity the previous IMG style to 0, and then set the new location IMG style opacity to 1 to form a carousel.

<!     DOCTYPE html>{margin:0; padding:0;            }. main,.scollimg,img{width:1500px;        height:800px; }. Main {margin:0Auto;        position:relative;        }. Main. scollimg {position:relative;            }. Main. scollimg img {position:absolute; Top:0; Left:0;            }. Main. item {position:absolute;            bottom:30px;            left:70px;            width:200px;        height:16px;            }. Main. item span {width:16px;            height:16px; Background-color: #ffffff; Display:inline-Block; Border-radius:50%;        }. Main. item Span:hover {cursor:pointer;            }. Arrow {position:absolute;            top:280px; Z-index:2;            Display:none;            width:40px;            height:40px; Font-size:36px; Font-Weight:bold; Line-height:39px; Text-Align:center;            Color: #ffffff; Background-color:rgba (0, 0, 0, 0.3);        Cursor:pointer; }. arrow:hover {background-color:rgba (0, 0, 0, 0.7);        }. Main:hover arrow {display:block;        } #btnleft {left:20px;        } #btnright {right:20px; }    </style>varAutomove ={imgs:NULL,//Number of IMG nodes (number of images)SpansNULL,//number of span nodes (circled in the lower-left corner)count:0,//count the carousel playback to that pictureScollmove:-1,//number of span nodes (circled in the lower-left corner)lastnode:0,//previous img and span index locations        //by modifying the IMG opacity to achieve the control of the IMG explicit        //Index : Carousel index. IMG Carousel to that location, set the IMG style for that location. First, change the previous IMG style opacity to 0 and then set the index position IMG style opacity to 1Stylemovement:function(index) {varTemplastnode = This. lastnode, Tempimgs = This. IMGs, Tempspans = This. Spans; Tempimgs[templastnode].style.opacity= "0"; Tempspans[templastnode].style.background= "#ffffff"; Tempimgs[index].style.opacity= "1"; Tempspans[index].style.background= "#ff0000";  This. Lastnode =index; },        //Carousel is toggled by Count count. Displays the first picture when initializing, then hides the first picture showing the second picture, and so on        //here count starts at 1 (count is 0 at initialization) and executes sequentially. When Count===imgs.length, since the IMGs index of the last image of the picture is imgs.length-1, the count is reset to 0, which plays a round-robin function and restarts sequentially. Shiftmovement:function() {automove.stylemovement ( This. count++); if( This. Count = = This. Imgs.length) {                 This. Count = 0; }        },        //buttons and click ActionsBtnaction:function(type) {clearinterval ( This. Scollmove);//before the button operation, clear the carousel timer to avoid time conflicts            Switch(type) { Case"Left": {                    if( This. Count = = 0) {                         This. Count = ( This. imgs.length-1); } Else {                         This. count--; } automove.stylemovement ( This. Count);  Break; }                 Case"Right": {automove.shiftmovement ();  Break; }                default: {                     This. Count =type;                    Automove.stylemovement (type);  Break                }            }             This. Scollmove = SetInterval (function() {//when the mouse operation is complete, re-execute the carousel timerautomove.shiftmovement (); }, 2000); },        //Event BindingsBindingevent:function() {document.getElementById (' Btnleft '). AddEventListener ("click",function() {//bind event to left buttonAutomove.btnaction ("left");            }); document.getElementById (' Btnright '). AddEventListener ("click",function() {//bind event to right buttonAutomove.btnaction ("Right");            }); Document.queryselector ('. Item '). AddEventListener ("click",function(event) {//Click a specific span binding eventAutomove.btnaction (parseint (Event.target.getAttribute ("Data-index")));        }); },        //function Initialization: node acquisition, event binding, execution timerInit:function(PAR1,PAR2) {//parameter and function initialization            varTempimgs = This. IMGs =document.getElementsByTagName (PAR1); varTempspans = This. spans =document.getElementsByTagName (PAR2); varLength =tempimgs.length;  for(vari = length; i--;) {//set all IMG and span opacity styles to 0Tempimgs[i].style.opacity = "0"; Tempspans[i].style.background= "#ffffff";            } automove.bindingevent (); Automove.stylemovement (0);//when initializing, displays the first picture (the position indexed as 0)             This. count++;//The count is added 1 before the rotation timer is executed, and when the timer is executed, the picture is displayed from the second (index 1) to form a coherent display             This. Scollmove = SetInterval (function() {//Set the carousel timer to execute automatically every 2 secondsautomove.shiftmovement ()},2000)        }    }; //load Complete ExecutionWindow.onload =function() {Automove.init ("IMG", "span"); };</script></body>
JS Native Implementation Carousel