Home>

Doing dom with jquery is really convenient,And jquery provides a very user-friendly API to meet our various needs,The selector is particularly outstanding on this example-"jquery implements carousel effect",Greatly simplified the code of js,

[Principle Brief]

Here is an overview of the entire process:

1. Hide all pictures except the first one,

2. Obtain the alt information of the first picture and display it in the information bar.And add click events

3. Add click listen for 4 buttons,Click the appropriate button.Display pictures with fadeout, fadein methods

4. Set setinterval to execute the switching function regularly

[Code description]

filter (":visible"):get all visible elements

unbind ():remove bound events from matched elements

siblings:get an element set containing all unique sibling elements of each element in the matched element set

Example:Find all the sibling elements of each div with the element named class selected.

<p>hello</p><div><span>hello again</span></div><p>

Execute $("div"). Siblings (), the result

[<p>hello</p> ;,<p>and again</p>]

[Program source]

html part:

<body>
<div>
<div></div><!-Title Background->
<div></div><!-Title->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>
<a href="#" target="_ blank"><img src="imgs/p1.jpg" /></a>
<a href="#" target="_ blank"><img src="imgs/p5.jpg" /></a>
<a href="#" target="_ blank"><img src="imgs/p3.jpg" /></a>
<a href="#" target="_ blank"><img src="imgs/p4.jpg" /></a>
</div>
</div>
</body>

css part:

<style type="text/css">
#banner {position:relative;width:478px;height:286px;border:1px solid #666;overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute;bottom:0;background-color:#000;height:30px;filter:alpha (opacity=30);opacity:0.3;z-index:1000;
cursor:pointer;width:478px;}
#banner_info {position:absolute;bottom:0;left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002;right:3px;bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter:alpha (opacity=80);opacity:0.8;border:1px solid #fff;z-index:1002;
margin:0;padding:0;bottom:3px;right:5px;}
#banner ul li {padding:0px 8px;float:left;display:block;color:#fff;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on {background:#900}
#banner_list a {position:absolute;}<!-Make all four images overlap->
</style>

js part:

<script type="text/javascript">
var t=n=0, count;
$(document) .ready (function () {
count=$("#banner_list a"). length;
$("#banner_list a:not (:first-child)"). hide ();
$("#banner_info"). html ($("#banner_list a:first-child"). find ("img"). attr ("alt"));
$("#banner_info"). click (function () {window.open ($("#banner_list a:first-child"). attr ("href"), "_blank")});
$("#banner li"). click (function () {
var i=$(this) .text () -1;//Get the value inside the li element,Ie 1, 2, 3, 4
n=i;
if (i>= count) return;
$("#banner_info"). html ($("#banner_list a"). eq (i) .find ("img"). attr ("alt"));
$("#banner_info"). unbind (). click (function () {window.open ($("#banner_list a"). eq (i) .attr ("href"), "_blank")})
$("#banner_list a"). filter (":visible"). fadeout (500) .parent (). children (). eq (i) .fadein (1000);
document.getelementbyid ("banner"). style.background="";
$(this) .toggleclass ("on");
$(this) .siblings (). removeattr ("class");
});
t=setinterval ("showauto ()", 4000);
$("#banner"). hover (function () {clearinterval (t)}, function () {t=setinterval ("showauto ()", 4000);});
})
function showauto ()
{
n=n>= (count -1)?0:++ n;
$("#banner li"). eq (n) .trigger ("click");
}
</script>
  • Previous Solution to 403 error when using jquery ajax post data in django (two methods)
  • Next TreeView in C # implements a selected node method suitable for two-level nodes