Home > Developer > JavaScript
Complete DEMO code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> JQuery achieves image carousel effect </title> <style type =" text/css "> </style> </pead> <body> <p> [demo] </p> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
[Principles]
Here we will talk about the entire process:
1. Hide all images except the first one,
2. Obtain the alt information of the first image and display it in the Information column. Then, add a click event.
3. Add a listener for the four buttons, click the corresponding button, and use the fadeOut and fadeIn methods to display the image.
4. Set setInterval and regularly execute the switching function.
[Code description]
Filter (": visible"): Get all visible elements
Unbind (): deletes the Bound event from the matched element.
Siblings: gets a set of all unique peer elements of each element in a matched element set.
For example, find all peer elements of each div with the class name selected.
Copy codeThe Code is as follows:
<P> Hello </p> <div> <span> Hello Again </span> </div> <p> And Again </p>
Run $ ("div"). siblings () and the result is
Copy codeThe Code is as follows:
[<P> Hello </p>, <p> And Again </p>]
[Program source code]
HTML section:
Copy codeThe Code is as follows:
<Div id = "banner">
<Div id = "banner_bg"> </div> <! -- Title background -->
<Div id = "banner_info"> </div> <! -- Title -->
<Ul>
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
</Ul>
<Div id = "banner_list">
<A href = "#" target = "_ blank"> </a>
<A href = "#" target = "_ blank"> </a>
<A href = "#" target = "_ blank"> </a>
<A href = "#" target = "_ blank"> </a>
</Div>
</Div>
CSS section:
Copy codeThe Code is as follows:
<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-color: #6f4f67; cursor: pointer}
# Banner_list a {position: absolute ;}<! -- Make all four images overlap -->
</Style>
JS section:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery-1.2.6.pack.js"> </script>
<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; // obtain the value in the Li element, that is, 1, 2, 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 "). eq (I ). attr ('href '), "_ blank ")})
$ ("# Banner_list a"). filter (": visible"). fadeOut (500). parent (). children (). eq (I). fadeIn (1000 );
Certificate (this).css ({"background": "# be2424", 'color': '0000000'00000000.siblings().css ({"background": "#6f4f67", 'color': '# fff '});
});
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
