<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">. Imgbox{width:100%;Height:400px;position:relative;Top:20px; Left:15px; }img{Opacity:0;position:Absolute;Max-height:400px;Max-width:300px; } </style> </Head> <Body> <Divclass= "Imgbox"ID= "Imgbox"> <imgsrc= "Img/19.jpg"style= "opacity:1;"alt="" /> <imgsrc= "Img/20.jpg"alt="" /> <imgsrc= "Img/21.jpg"alt="" /> <imgsrc= "Img/22.jpg"alt="" /> <imgsrc= "Img/23.jpg"alt="" /> <imgsrc= "Img/24.jpg"alt="" /> </Div> <inputtype= "button"value= "Toggle"onclick= "Change ()" /> <Script> //Global Address varIndex= 0; functionChange () {//get all picture lengths varIMGs=document.getElementsByTagName ("img"). length; varNext=Index+ 1; if(Index==IMGs- 2) { //imgs-1 is length (starting from 0); Imgs-2 is index (next+1)Next= 0; } //get all the picture elements varimg=document.getElementById ("Imgbox"). Children; Img[index].style.opacity= 0; Img[next].style.opacity= 1; Index=Next; Console.log (index); } window.setinterval ("Change ()", -); </Script> </Body></HTML>
HTML plain JavaScript code write picture Carousel