This article tells the jquery simple picture switch display effect realization method, shares for everybody reference. The implementation methods are as follows:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<title>jquery Picture Switching effect </title>
<script type= "Text/javascript" src= "Jquery-1.8.2.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#item Li:not (: First)"). CSS ("display", "none");//Show only picture one, other hidden
var BB = $ ("#item li:last");
var AA = $ ("#item Li:first");
SetInterval (function () {
if (bb.is (": Visible")) {
Aa.fadein (1000). addclass ("in");
Bb.hide ();
}else{
$ ("#item li:visible"). AddClass ("in");
$ ("#item li.in"). Next (). FadeIn (1000);
$ ("#item li.in"). fadeout (1000). Removeclass ("in");
}
},3000);
});
</script>
<style type= "Text/css" >
li{list-style:none;display:block;width:500px;border:1px solid #ccc;p adding:5px;}
. In{display:block;}
</style>
<body>
<ul id= "Item" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
I hope this article will help you with your jquery programming.