Zero-based article page carousel achieve an effect, I too hard ah

You see what?

Have you ever thought? Has been engaged in the operation of the pipeline you, perhaps in terms of process control programming genius. Have you ever thought? You have been both ways, you may also be able to do great things by the hands of the keyboard? Have you ever thought? Usually you like bland, perhaps the body buried "programmer" surprise the bones.

Or maybe you did not! So with my hands together to try to know!

Not nonsense, the dry!

We have to do the results show (Carousel Figure):

Menu (material needs):

html language (page handling structure)
css language (beautification page)
javaScript language (page lets move)

We were with three modules to achieve alone, do not even think that this

Write html page skeleton

We right-click a folder, create a text file __ __ like this
Then we write the following code in it
Labels have single, double points, the ditag to </ tag name> is the end tag in the tag mounted on the inside of what is
The following structure is yong_hu_kan comprising lun_bo_tu_he_zi

<html>
    <head>
        <title>这是我的轮播图页面哟</title>
    </head>
    <body>
        <div id="yong_hu_kan">
           <div id="lun_bo_tu_he_zi">
           		<!-- 这里未来放点东西 -->
            </div>     
        </div>
    </body>
</html>

Then the three groups into which

Box picture ( HTTP address that is the picture, not to handwritten yo )

<div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
                </div>
                <div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmesH11iotzh7lM0G292gt2X2cmdsxkgO5bl2O4yRGf9GN2HWz.D661rMtBCu5EbBQAwjheXdpWZllS6w9itABFIM!/b&bo=yADIAAAAAAACFzM!&rf=viewer_4">
                </div>
                <div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
                </div>

Then run the program, the easiest way is just to file written __ off with the left mouse button into your browser and then let go __, if nothing unexpected happens, you will see

Brother tinkling, then your html page is complete

CSS beautify

Knock blackboard!

Add the following code in the head tag, provided their width and height

<style>
    #yong_hu_kan {
        width:200px;
        height:200px;
    }   
    #lun_bo_tu_he_zi {
		width:600px;
        height:200px;
    }
</style>

Let the picture sideways arrangement, let luo_bo_tu_he_zi inside three div are floated like a left and continue to add the following code in the style tag
1. ```
#lun_bo_tu_he_zi div {
    float:left;
}
```
Well, remember that Ctrl S keys to save it, save later, thrown into the file browser, you'll see:
Then there is an obstacle to be cleared (Do not ask why, I too hard)
2. Then we add style tag
3. ```
body { margin:0px; }
```

CSS beautify this point to get! ! !

JavaScript articles

This one does want to be harder than before, knowledge is also blind spots can not be avoided, because of space limitations, only you know what's the use, how to use enough

First to a thermal field, write the label at the top end of the body tag

     <script>
			// 这里未来会放代码，下面的body不要照抄，
            // 写出来是让大家知道位置
	 </script>
</body>

First, we analyze, we now have three plans should be arranged horizontally, then break it down next task, the code is written script tag inside :

Gets been set 600px width lun_bo_tu_he_zi box (there are three groups within div img)
1. ```
var ele = document.getElementById('lun_bo_tu_he_zi')
```
Let moves to the left in FIG. 1, FIG. 2 occurs, and then move to the left, FIG. 3 occurs
1. ```
ele.style.left = ele.offsetLeft - 200   'px';
```
2. Code above means is described positions: a plurality of multiple now left = left - 200 (image width) stitching 'px'
Each time interval of 1 second and then need to move mobile ( code fixed format )
1. ```
setInterval(function() {
    // 你要做的是
},1000)
```
Currently set left property box, the box can not move, because the default layout is similar to put shelves on the left is a wall, not allowed to move to the left, so we gave him to set absolute positioning, you can fly anywhere, even flying offscreen.
So come on, understand the write down
1. ```
ele.style.position = 'absolute';
ele.style.left = '0px';
```
2. First, we set the absolute positioning can easily fly absolute (absolute sense). Second, it is provided a start position for the wall of the left side by side (the reason similar to the beginnings and ends)

Tidy, and now our code is as follows ( // is a comment does not affect the operation of the program, only people able to read the code

<style>
    // 获取盒子
    var ele = document.getElementById('lun_bo_tu_he_zi');
    // 让它飞
    ele.style.position = 'absolute';
    // 设置从哪飞
    ele.style.left = '0px';
    // 每隔一秒做什么事
    setInterval(function () {
        // 设置它有多靠左 = 现在有多左 - 200 拼接'px'
     ele.style.left = ele.offsetLeft - 200   'px';
    },1000)
</style>

Well, then you can see the effect, remember to save the file and refresh your browser

The penultimate effect

Tinkering

Ouch ouch, just found out how to move on the map is gone?

The reason is that we do not control him when he returns to the initial continue to roll
Here Insert Picture Description

The next question is, then the third step should be doing? He also continues to move to the left? That is not to have had nothing! ! So we need to get him back to the starting point, namely: setting left = 0px; also continued to follow the move, we change the code as follows:

setInterval(function () {
    // 如果满足（）里面的条件就执行后续，否则执行else
    if (ele.offsetLeft <= -400) {
        // 设置它有多靠左 = '0px'
     	ele.style.left ='0px';
    } else {
        // 设置它有多靠左 = 现在有多左 - 200 拼接'px'
    	 ele.style.left = ele.offsetLeft - 200   'px';
    }
},1000)

Now no matter how good, the next is beautify things:

Three simultaneous picture does not look good, we see a need, you need to take with the box to the left continues to move beyond

Hide the contents of the box. We use it to set up three css styles
1. ```
#yong_hu_kan {
 		overflow: hidden;
        position: relative;
}
```
2. The first property is partially hidden beyond the second attribute is due before we set absolute positioning is off, so let the page is not aware of the relationship between the boxes contained, so we declare it here, and that is #yong_hu_kan of #lun_bo_tu_he_zi relationship
Come back slowly add transition effects
1. For that element? Answer: #lun_bo_tu_he_zi
2. What needs to change a property of transition? Answer: left
3. Transition time slowed down, take a few seconds to complete? Answer: 1s
4. ```
#lun_bo_tu_he_zi {
    transition:left 1s;
}
```

Get! See results The first reciprocal effect

Written in the last

Oh, worn out, because there is some knowledge blind spots, so the time to explain to explain almost all looked around, and finally hope that we can through this case there is a certain interest in the front, I am Wuhan hope that we can through this time to understand the epidemic, famine hungry artisans truth, I hope you can learn, less Starchaser. . . Also: there is a need source code or do not do half the students can try to contact me, because third-party contact information can not be made, so are generally concerned to contact private letter like the

Tu teacher

Published 35 original articles · won praise 64 · views 10000 +

Private letter concerns