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

Source: Internet
Author: User

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

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.