Examples of image carousel effect using JQuery (recommended) and jquery instances

Examples of image carousel effect using JQuery (recommended) and jquery instances

[Effect]

[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.

[Program source code]

First introduce the JS file:

　 <script src="bootstrap/js/jquery-1.11.2.min.js"></script>    <script src="bootstrap/js/bootstrap.min.js"></script>    <link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>

HTML section:

<div id="banner">    <ul>    <li class="on"><a href="">1</a></li>    <li><a href="">2</a></li>    <li><a href="">3</a></li>    <li><a href="">4</a></li>    <li><a href="">5</a></li>    <li><a href="">6</a></li>   </ul>   <div id="banner_list">    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"></a>    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"></a>    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"></a>    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"></a>    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"></a>    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"></a>   </div>  </div>

CSS section:

<Style type = "text/css"> # banner {position: relative; width: 280px; height: 160px; border: 1px solid #666; overflow: hidden ;} # banner ul {width: 138px; height: 18px; position: absolute; list-style-type: none; filter: Alpha (Opacity = 80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 5px; line-height: 18px; text-align: center ;} # banner ul li {width: 18px; height: 18px; margin: 0px 2px; float: left ; Display: block; color: # FFF; border: # e5eaff 1px solid; background: # 6C6D6E; cursor: pointer} # banner ul li. on {background: #900} # banner ul li a {color: white;} # banner ul li a: hover {text-decoration: none ;}# banner_list a {position: absolute ;}<! -- Make all six images overlap --> # banner_list {position: absolute; right: 5px; bottom: 5px ;}</style>

JS section:

<Script type = "text/javascript"> var t = n = 0, count; $ (document ). ready (function () {count = $ ("# banner_list "). 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, 3, 4 n = I; if (I> = count) return; $ ("# banner_info" ).html ($ ("# banner_list "). eq (I ). find ("img "). attr ('alt'); $ ("# banner_info "). unbind (). click (function () {window. open ($ ("# banner_list "). eq (I ). attr ('href '), "_ blank")}) $ ("# banner_list "). filter (": visible "). fadeOut (1, 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>

The above example of using JQuery to achieve image carousel effect (recommended) is all the content shared by xiaobian. I hope to give you a reference, and I hope you can provide more support for the customer's house.