Jquery's simple big background banner image full screen switching,

Source: Internet
Author: User

Jquery's simple big background banner image full screen switching,

 

For details, click

 

This is a full screen picture switch on the PC end that I wrote to my colleagues (and also students) when I first graduated from the company, I can't express the joy of my graduation. At that time, I still had nothing to understand, which is commonly known as cainiao. My website was launched soon, and I recently sorted out some of my previous tasks.

 

Large background full screen switching:

 

 

Large background full-screen switching effect html content:

 

<! -- Banner image switching starts -->
<Div class = "banner">

<Div class = "block none"> </div>
<Div class = "none"> </div>
<Div class = "none"> </div>
<Div class = "none"> </div>
<Div class = "none"> </div>

<Div class = "banner_1">
<Ul class = "banner_2">
<Li>
<Span class = "banner_3"> </span>

<P> rich and powerful functions </p>
</Li>
<Li>
<Span class = "banner_3"> </span>

<P> cloud data processing capabilities </p>
</Li>
<Li>
<Span class = "banner_3"> </span>

<P> powerful production engine on the cloud </p>
</Li>
<Li>
<Span class = "banner_3"> </span>

<P> high-quality user experience </p>
</Li>
<Li>
<Span class = "banner_3"> </span>

<P> statistical analysis of user behavior </p>
</Li>
</Ul>
</Div>
</Div>
<! -- Banner image switching ends -->

 

Css content for full-screen switching of large backgrounds:

 

@ Charset "UTF-8"; * {margin: 0; padding: 0}
Body, div, dt, p, dl, dd, ul, li, ol, a, input, figure, figcaption, img {list-style: none; margin: 0 auto; padding: 0; text-decoration: none}
. Banner {width: 100%; height: pixel PX; position: relative; background: url ("../images/banner_beijing1.jpg") no-repeat; background-size: 100% 100%}
. Banner_1 {width: 100%; height: 125px; position: absolute; bottom: 0; left: 0; border-top: 1px solid # fff}
. Banner_2 {width: 1000px; height: 125px}
. Banner_2. img_1 {width: 80%; border: 4px # f7941d solid}
. Banner_2 li {width: 150px; height: 125px; float: left; padding: 15px 25px 15px 25px; color: # fff; position: relative}
. Banner_2 li. banner_3 {width: 29px; height: 18px; position: absolute; top: 0; left: 85px}
. Sanjiao {background: url ("../images/index_sj.png") no-repeat}
. Banner_2 li p {margin-top: 10px}
. Banner. none {display: none; text-align: center}
. Banner. block {display: block; text-align: center}

 

Big background full screen switching effect js content:

 

Var color;
$ (Document). ready (function (){
$ (". Banner_2 li"). bind ("mousemove", changebg );
Test (0 );
});
Function changebg (){
Var index = $ (". banner_2 li"). index ($ (this ));
Test (index );
};
Function test (index ){
Var li_length = $ (". banner_2 li"). length;
If (index> li_length ){
Index = 0;
}
$ (". Banner_2 li" ).eq(index).css ("color", "# f7941d" ..siblings(..css ("color", "# ffffff ");
$ (". None"). eq (index). show (). siblings (". none"). hide ();
$ (". Banner_3 "). eq (index ). addClass ("sanjiao "). parents (). siblings (). children ("span "). removeClass ("sanjiao ");
$ (". Banner_2 img "). eq (index ). addClass ("img_1 "). parents (). siblings (). children ("img "). removeClass ("img_1 ");
ClearTimeout (color); // clear the timer
Color = setTimeout ("test (" + (index + 1) + ")", 3000); // Add a timer
}

Learning Source: http://www.j--d.com/jquery/443.html

 

For more jquery content, click

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.