Home > Developer > JavaScript
<style>. Box{width:500px;Height:275px;position:relative;margin:100px Auto; }a{text-decoration:None;font-size:28px;text-align:Center;Line-height:80px;Display:Inline-block;width:40px;Color:#fff;background:Rgba (0,0,0,0.6);position:Absolute;Top:100px; }. Box #prev{ Left:0px; }. Box #next{ Right:0px; }. Box #txt{Display:Block;background:Rgba (255,255,255,0.4);width:100%;text-align:Center;position:Absolute;Bottom:5px; } * {padding:0px;margin:0px; }</style>
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body> <Divclass= "box"ID= "box"> <ahref= "javascript:;"ID= "Prev"><</a> <ahref= "javascript:;"ID= "Next">></a> <spanID= "txt">First one</span> <imgsrc= "Images/1.jpg"ID= "img" /> </Div> </Body></HTML>
<script>window.onload=function() { //0 1 2 3 varaimg=["Images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg";//creating an array of picture paths varatext=["First", "second", "third", "fourth"];//creating an array of text vari=0;//Initialize variable i varPrev=document.getelementbyid (' prev ');//get Element varNext=document.getelementbyid (' Next '); varOimg=document.getelementbyid (' img '); varOtxt=document.getelementbyid (' txt '); varObox=document.getelementbyid (' box '); Next.onclick=function() {banner ();//Call global function banner Keep looking down and you can} Prev.onclick=function() {i--;//reduce I by 1 each time if(I==-1)//if I equals-1 that is, the carousel is the first one.{i=aimg.length-1;//then I equals the number of image arrays is reduced by 1, because the array subscript defaults from 0 and length is the number of real data so-1 is equal to the last image.} otxt.innerhtml=atext[i];//the text content equals the first I of the arrayOimg.src=aimg[i];//the picture path equals the first I of the array} Banner=function()//The function here is equivalent to encapsulating the i++ to reduce the amount of code banner=function this write is to set the global function for the timer to call{i++;//Add 1 each time if(i==aimg.length)//If I equals the number of picture arrays, then the last user is rolled back.{i= 0;//Since then, I=0 jumped back to the first one .} otxt.innerhtml=atext[i];//Ibid .Oimg.src=Aimg[i]; } Timer=setinterval ("banner ()", 3000);//Set the timer to change no more than 3 seconds and add the timers nameObox.onmouseover=function() {clearinterval (Timer);//Stop the timer when the main body is passing this time indicates that the user is browsing the carousel diagram} obox.onmouseout=function() {Timer=setinterval ("banner ()", 3000);//turn on the timer again when you underline } } </script>
All I have to say is in the comments novice look at it personally think write more detailed look master criticism!
Native JavaScript carousel Diagram!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
