Photo Carousel Area

The first step is to create a box

• Action:. Banner press Tab

<divclass="banner"></div>

• Write CSS

.banner{            height: 382px;            width: 100%;            overflow: hidden;        }

Note: Because the image inside the banner is 3000px wide, it will go beyond our screen and the screen will appear with a horizontal scroll bar. I don't want scrollbars to appear, so we'll set an overflow hidden property banner to hide the part that overflows the child element.

The second step is to create a small box: Picture box

1. . banner-img press TAB, enter
2. Write an A
3. Write an img in a and write the image address in the IMG SRC
4. Use the same method as in the previous step to make the other two pictures

 <div class="banner-img">       <a href="">           <img src="1b386754-f5fe-42a8-9d16-9666ca576db1.jpg" alt="" />       </a>       <a href="">           <img src="6d405bc3-25af-45b7-9eb6-8ef005577f25.jpg" alt=""/ >       </a>       <a href="">           <img src="19addf8c-8893-45f1-b5d4-ccb891aa9c81.jpg" alt= ""/>       </a> </div>

The effect of the page now: there is a white space outside the page, no full screen, and the picture is not centered. The image width is 3000px, we use JS to make the picture center.

Calculation principle: The difference between the width of the picture and the width of the document, which now overflows from the document and overflows to the right outside the document. So we need to offset this part of the overflow by One-second to the left, so the picture can be centered.

 <script  src  =;    </script ;  Span class= "Hljs-tag" ><script ;   //gets the width of the current document  var  win = $ (document.body). width (); //calculates the offset value  var  diff = (3000 -win)/ 2 ; $ ( banner-img img ' ). CSS ( ' Margin-left ' ,-diff +  ' px ' ) ;  </script ;  

1. Add a default style to the body, remove the four-week margin, and add a bottom padding to make it easier to see the effect

    body{        margin: 0;        padding-bottom: 50px;    }

1. Add a show class to a for the first picture, as a marker for the display
2. Add a hidden style to the other two pictures and let them hide

<div class="banner-img">     <a href="" class="Show">         <img src="1b386754-f5fe-42a8-9d16-9666ca576db1.jpg" alt="" />     </a>     <a href="" style="Display:none;" >         <img src="6d405bc3-25af-45b7-9eb6-8ef005577f25.jpg" alt=""/ >     </a>     <a href="" style="Display:none;" >         <img src="19addf8c-8893-45f1-b5d4-ccb891aa9c81.jpg" alt= ""/>     </a></div>

• Use JS to write a timer to switch pictures

  //Timer  varTimer = SetInterval ( function(){             //Current display of hidden            varshowing = $ ('. banner-img. Show '); Showing.removeclass (' Show '). FadeOut ( $);//Next display            varNeedshow = Showing.next ();if(Needshow.length = =0) {Needshow = $ ('. Banner-img a '). EQ (0); } needshow.addclass (' Show '). FadeIn ( $); } , the);

Written here, the picture Carousel area is complete.

The third step is to create a small box for the center content

• Note that this element is a child of banner and must be placed in banner, with banner-img being the sibling element

<divclass="container banner-center"></div>

1. To define the style for our centering element.
2. The fixed width has already been defined in the container.
3. Fixed height: Consistent with the height of the parent banner
4. Use absolute positioning relative to Parent banner: Add a property to the parent first
5. Then add an absolutely positioned property to yourself: Navigate to the left 50% position of the parent, top 0
6. Sets the offset to the left, with the offset value being half the width of its own

        . Banner{  height: 382px;             width: %;             Overflow: hidden;         position: relative; }        . Banner-center{ height: % ; position: Absolute ; top: 0  ;Left  : % ; margin-left: -px ; background-color: #000000  ;}

To make it easier to see the effect, we add a black background. At this point our banner-center is already centered.

The fourth step is to create a small box in Banner-center: Dot

• Write HTML code, write Banner-dot to Banner-center

        <div class="Container banner-center">            <div class="Banner-dot">                <span class="dot"></span>                <span class="dot"></span>                <span class="dot"></span>            </div>        </div>

1. Write the Banner-dot style and Banner-dot to the absolute position.
2. With absolute positioning relative to Banner-center, Banner-center already has position:absolute properties.

        .banner-dot{            position: absolute;            bottom: 20px;            left: 20px;        }

1. Write the dot style
2. Note that span is an inline element, be sure to add an inline-block element attribute, otherwise the width height does not take effect

 .dot  { width :  10  px  ; height :               px  ; border-radius :  100 %  ; background-color :   #fff   ; display :  Inline-block        ;     

At this point, our dots are ready to write.

Fifth Step write a login box for the small box: Banner-login

• Write HTML code
• Note that this element is a child element of Banner-center, and Banner-dot is a sibling element

            <div class="Banner-login">                <p>First line</P>                <p>Second line</P>                <p>Third line</P>                <a href="" class="Btn-yellow">Register Now</a>            </div>

1. Add a style to Banner-login first
2. Background color of a transparent color
3. One inner margin 20px
4. Banner-center is positioned relative to the parent.
5. Text color Black
6. Set the line height and pull the distance between p
7. Center text

        . Banner-login{ padding: px ; background-color: rgba (255, 255, 255,.  8)  ; position: Absolute ;Right  : 0  ; top: px ; text-align: Center ; Border-radius:4px ;}

1. Add a style to the Register button
2. Note that a is an inline element and must be turned into an inline-block element

        . Btn-yellow{ width: px ; line-height: px ; Border-radius:4px ; background-color: #ff8813  ; color: #ffffff  ; display: inline-block ; text-decoration: None ;}

So far, our login box has been written.

Photo Carousel Area