jquery Simple big background banner picture full screen toggle

For more information, please click here.

This is my first graduation just into the company that will help colleagues (and students) write a PC-side full-screen picture switching effect, for just graduated from me to write that will be the joy of the feeling is unable to say, then I still what do not understand the small white, commonly known as rookie. Personal web site Soon, the recent collation of some of the former small force lattice things

Large background Full screen toggle:

Large background Full screen toggle effect HTML content:

<!--banner picture switch Start-
<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 features </p>
</li>
<li>
<span class= "banner_3" ></SPAN>

<p> Cloud data processing capability </p>
</li>
<li>
<span class=" Banner_3 "></SPAN>

<p> Cloud Super Production engine </p
</li>
<li>
<span class= "banner_3" ></SPAN>

<p> High-quality user experience </p>
</li>
<li>
<span class=" Banner_3 "></SPAN>

<p> user behavior statistical analysis </p
</li>
</ul>
</div>
</div>
<!--banner picture switch end-->

Large background full screen toggle effect CSS content:

@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:450px;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;p osition: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}

Large background Full screen toggle 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 Timer
color = setTimeout ("Test (" + (index + 1) + ")", 3000);//Add Timer
}

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

For more information on jquery, click

jquery Simple big background banner picture full screen toggle