How to use JQuery code to realize the effect of picture rotation
The knowledge of this article "how to use JQuery code to achieve picture rotation effect" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use JQuery code to achieve picture rotation effect" article.
[brief introduction of principle]
Here's an overview of the whole process:
1, hide all the pictures except the first one
2. Get the alt information of the first picture and display it in the information bar, and add a click event
3, add click listening to the 4 buttons, click the corresponding button, and display the picture with the fadeOut,fadeIn method
4. Set the setInterval and execute the switching function regularly
[code description]
Filter (": visible"): get all visible elements
Unbind (): removes bound events from matching elements
Siblings: gets a collection of elements that contain all unique sibling elements of each element in the matching set of elements
[program source code]
First introduce the JS file:
HTML section:
1 2 3 4 5 6
CSS section:
# 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 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;} # banner_list {position:absolute; right: 5px; bottom: 5px;}
JS section:
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 function / get the value within the Li element, that is, 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') } the above is the content of this article on "how to use JQuery code to achieve picture rotation effect". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.
