jquery simple image switching effect, support PC-side, mobile banner picture switch development

For more information, please click here.

Accidentally saw two years ago written a picture switch, then just learning Web page production, can be said to be my first Virgo's jquery image switch effect. Bored to its width slightly did a bit of modification, became a support PC-side, mobile phone end full-screen banner image switching effect.

The wording is very simple, the homepage scholar or the Wenbapp scholar may take to study, also may in this foundation add the mobile phone picture slide to switch the effect. Nonsense not much to say, the following talk about this simple picture of the effect of switching it!

First, the following is the image switch:

Image switch effect HTML content:

<div class= "Tyna2" >
<div class= "Tyna2-none" ></div>
<div class= "Tyna2-none" ></div>
<div class= "Tyna2-none" ></div>
<div class= "Tyna2-none" ></div>
<div class= "Tyna2-none" ></div>
<ul class= "TYNA2-UL1" >
<li class= "Tyna2-none1" > You are my little Apple </li>
<li class= "tyna2-none1" > Phone banner picture Toggle effect </li>
<li class= "tyna2-none1" >pc full screen picture toggle effect </li>
<li class= "Tyna2-none1" >pc, app is available for picture switch </li>
<li class= "tyna2-none1" >webapp picture Toggle Effect </li>
</ul>
<ul class= "Tyna2-ul2" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Image switch effect CSS content:

. tyna2{width:100%;p Osition:relative;}
. tyna2-none{width:100%;}
. tyna2-ima{width:100%;}
. Tyna2-ul1{width:100%;height:40px;font-size:0.8em;position:absolute;left:0px;bottom:0px;color: #FFFFFF; Filter: Alpha (opacity:50); opacity:0.5;}
. TYNA2-UL1 Li{width:98%;height:40px;line-height:40px;padding-left:2%;white-space:nowrap;overflow:hidden; Text-overflow:ellipsis;}
. tyna2-ul2{position:absolute;right:10px;bottom:10px;}
. Tyna2-ul2 li{width:5px;height:5px;border-radius:90px;float:left;margin-left:5px;}
. Tyna2-none{display:none;}. Tyna2-none1{display:none;}
. Tyna2-block{display:block;}

Picture Toggle Effect JS content:

var tynatime
$ (document). Ready (function () {
$ ('. Tyna2-ul2 li '). bind ("MouseMove", CHANGEBG);
Test (0);
});
function Changebg () {
var index=$ ('. Tyna2-ul2 li '). Index ($ (this));
Test (index);
}
function Test (index) {
var li_length=$ ('. Tyna2-ul2 li '). length;
if (index>li_length) {
index=0;
}
$ ('. Tyna2-ul2 li '). EQ (index). CSS (' background ', ' red '). Siblings (). CSS (' background ', ' #ffffff ');
$ ('. Tyna2-none '). EQ (index). Show (). Siblings ('. Tyna2-none '). Hide ();
$ ('. Tyna2-none1 '). EQ (index). Show (). Siblings ('. Tyna2-none1 '). Hide ();
Cleartimeout (Tynatime);
Tynatime=settimeout (' Test (' + (index+1) + ') ', 3000);
}

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

For more HTML5 content, please click here.

jquery simple image switching effect, support PC-side, mobile banner picture switch development