Home > Developer > JavaScript
Today is not in the status, quiet May Day is approaching, I really want to play. Okay, the sky is dark. I don't want to talk much about it. Let's take a look at the automatic rotation effect of images implemented using javaScript. Let's first look at the images.
The following code is relatively simple.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> prisoner of jailbreak </title>
<Style type = "text/css">
. Content {
Border: 3px solid red;
Padding: 3px;
Width: 500px;
Height: 245px;
Position: relative;
}
. Content img {
Border: 0;
}
. Content div {
Position: absolute;
Z-index: 1000;
Border: 2px solid green;
Padding: 3px 5px;
Background: # ccc;
}
. Content. cur {background: red; color: white;} // The small block of the currently displayed image, in a white red background
</Style>
<Script type = "text/javascript">
Var arr = ['images/1.jpg ', 'images/2.jpg', 'images/3.jpg ', 'images/4.gif', 'images/5.jpg '];
Var I = 0;
Var ob, obk;
Function lunhuan (){
If (I> 4) {// if the number is greater than 4, it starts from 0.
I = 0;
}
Ob = document. getElementById ("image1 ");
Ob. src = arr [I];
// All div-0 to div-4, Background Color Set gray
For (var j = 0; j <= 4; j ++ ){
Document. getElementById ("div-" + j). style. backgroundColor = '# ccc ';
Document. getElementById ("div-" + j). style. color = 'black ';
}
Obk = document. getElementById ("div-" + I );
Obk. style. backgroundColor = 'red ';
Obk. style. color = 'white ';
I ++;
}
</Script>
</Head>
<Body onload = "window. setInterval (lunhuan, 1000);">
<Div class = "content">
<Div class = "cur" id = "div-0" style = "top: 215px; right: 128px;"> 1 </div>
<Div id = "div-1" style = "top: 215px; right: 98px;"> 2 </div>
<Div id = "div-2" style = "top: 215px; right: 68px;"> 3 </div>
<Div id = "div-3" style = "top: 215px; right: 38px;"> 4 </div>
<Div id = "div-4" style = "top: 215px; right: 8px;"> 5 </div>
</Div>
<Input type = "button" value = "test" onclick = "lunhuan ();"/>
</Body>
</Html>
Simply put, the process is as follows:
1. First define the outermost DIV
2. Define the image DIV next to it.
3. DIV in the lower right corner of the image
The timer function is used to rotate images and make changes to small blocks.
OK, go to bed.
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
