A simple application of the cyclic scrolling--js for the picture

First of all, the default is to understand the JS Loop branch operator and other basic syntax

It is also possible to implement a simple layout with CSS.

And then we can come and get a look.

[DOM tree node]It is divided into three main categories: element node, text node, attribute node text node and attribute node as the two child nodes of the element node. What is the use of it, we have to take the node, and then the node to set the properties of the node, modify the style.[view node]1.getElementById ("Div1") gets a unique node through an ID: multiple IDs with the same name will only take the first2.Getelementsbyname () takes an array of one or more nodes by nameUse the way, through loops, to fetch each node. Number of loops, zero-based < array. lengthGetelementsbyclassname () and getElementsByTagName are all arrays, usage with getelementsbyname () Example:

functiongetById () {//fetch to attribute node            //var Divbyid = document.getElementById ("Div1"). Style;                //take to element node                varDivbyid = document.getElementById ("Div1"); //DivById.style.backgroundColor = "Blueviolet";//node property named with small humpDivbyid.style.color= "Green"; Divbyid.innerhtml= "//Reset the HTML code in the modified div                if(DivById.style.backgroundColor = = "Blue") {DivById.style.backgroundColor= "Red"; }                Else{DivById.style.backgroundColor= "Blue"; }

A common method of Windows I can use here, and is the most critical, that is to set the timer

setinterval: Set the timer to cycle through two parameters every n milliseconds: the function that needs to be performed, the number of milliseconds example: var num =10;
var out=setinterval (function () {
document.write (num+ "<br/>");
num--;
if (num==0) {
clearinterval (out);
            }
},1000)

There are two key attributes that we need to use:

1.innerHTML properties: Set or get all HTML code 2 inside the node. InnerText: Set or get all the text inside the node below is the main function to achieve this: first do a piece of area, put down the picture you need to scroll (of course, the image size is the same, the figure to find it yourself)

< SectionID= "banner">            <DivID= "Inside">                <imgsrc=".. /img/12168431_1036060226444795_851404817_o_z1lzd7.jpg "/>                <imgsrc=".. /img/12388071_1065320530185431_2076280306_n_g93ygx.jpg "/>                <imgsrc=".. /img/12656432_1094243637293120_49905962_o_dk24or.jpg "/>                <imgsrc=".. /img/12903800_1136073019776848_60542799_o_rewsfx.jpg "/>                <imgsrc=".. /img/12910198_1136068819777268_2019684994_n_shntwd.jpg "/>            </Div>                    </ Section>

Then set the style (how to put down 10 images in the area where only four graphs can be displayed)

*{margin:0px;padding:0px; }#banner{width:440px;Height:110px;Overflow:Hidden;White-space:nowrap; }#inside{width:1100px;Height:110px;position:relative;White-space:nowrap;transition:All 0.5s Ease; }#inside img{float: Left; }

The last is the JS code, should have been very clear. Every 1s rolling 100px, 5 rolls, the counter zeroed.

varmanyimg= document.getElementById ("Inside"); Manyimg.innerhtml=manyimg.innerhtml+manyimg.innerhtml;//Console.log (manyimg.innerhtml=manyimg.innerhtml+manyimg.innerhtml);        varI=0; varGun = SetInterval (function() {i++; ManyImg.style.transition= "All 0.5s ease"; Switch(i) { Case1: ManyImg.style.transition= "None"; Inside.style.marginLeft= 0+ "px";  Break;  Case2: Inside.style.marginLeft= ( -110) + "px";  Break;  Case3: Inside.style.marginLeft= ( -110-110) + "px";  Break;  Case4: Inside.style.marginLeft= ( -110-110*2) + "px";  Break;  Case5: Inside.style.marginLeft= ( -110-110*3) + "px";  Break;  Case6: Inside.style.marginLeft= ( -110-110*4) + "px"I= 0;  Break;  Case7: Inside.style.marginLeft= ( -110-110*5) + "px";  Break;  Case8: Inside.style.marginLeft= ( -110-110*6) + "px";  Break;  Case9: Inside.style.marginLeft= ( -110-110*7) + "px";  Break;  Case10: Inside.style.marginLeft= ( -110-110*8) + "px";  Break;  Case11: Inside.style.marginLeft= ( -110-110*9) + "px";  Break; default:                         Break; }                    },1000)

If you need to add a digital button to control the corresponding picture, just use the UL or div to do the button, plus a function control on the line

<ulID= "Bannernumber">                <Lionclick= "Changeban (1)">1</Li>                <Lionclick= "Changeban (2)">2</Li>                <Lionclick= "Changeban (3)">3</Li>                <Lionclick= "Changeban (4)">4</Li>  </ul>

functionChangeban (NUM1) {Switch(NUM1) { Case1: Inside.style.marginLeft= 0+ "px";  Break;  Case2: Inside.style.marginLeft= ( -110) + "px";  Break;  Case3: Inside.style.marginLeft= ( -110-110) + "px";  Break;  Case4: Inside.style.marginLeft= ( -110-110*2) + "px";  Break;  Case5: Inside.style.marginLeft= ( -110-110*3) + "px";  Break; } I=num1-1; }

The effect can be practiced by oneself =. =, it's not illustrated here.

A simple application of the cyclic scrolling--js for the picture