The simplest image switching effect, supporting banner image switching development on pc and mobile terminals,

The simplest image switching effect, supporting banner image switching development on pc and mobile terminals,

 

For details, click

 

I accidentally saw an image switch I wrote two years ago. I just learned how to create a web page. It can be said that it was my first jquery image switch in Virgo. When I'm bored, I made a slight modification to its width, which turned into a banner image switching effect that supports full screen on pc and mobile phones.

 

The writing method is very simple. Beginners of web pages or beginners of wenbapp can take it for learning and learning. You can also add the sliding Switching Effect of pictures on mobile phones. Let's talk about the effect of switching images!

The following figure shows how to switch images:

 

Image switching 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"> mobile banner picture switching effect </li>
<Li class = "tyna2-none1"> pc Full Screen Picture switching effect </li>
<Li class = "tyna2-none1"> pc, app available picture switching </li>
<Li class = "tyna2-none1"> webapp image switching effect </li>
</Ul>
<Ul class = "tyna2-ul2">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>

Image switching effect css content:

. Tyna2 {width: 100%; position: 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 ;}

Js content of image switching effect:

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',' # ffff ');
$ ('. 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, click