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

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