This article mainly introduces jquery to realize the Enterprise website banner Focus Map Switching function, example analysis of jquery Enterprise site focus Map of the detailed implementation method, very simple and practical, need friends can refer to the
This article illustrates the method of jquery to realize the switching function of the Enterprise website banner Focus diagram. Share to everyone for your reference. Specifically as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66-67-68 69 70 71 72 73 74 75 76 77 78 79-80 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <title>jquery Fade Fade in with thumbnail slide </title> <script type= "Text/javascript" src= "jquery-1.6.2.min.js" ></script> <style> flashbanner{width : 782px;height:326px; overflow:hidden;margin:0 Auto; }. flashbanner{position:relative; Flashbanner. mask{height:32px;line-height:32px background-color: #000; width : 100%; text-align:right;position:absolute;left:0; Bottom:-32px;filter:alpha (opacity=70); -moz-opacity:0.7;opacity:0.7;overflow:hidden; }. Flashbanner. Mask img{vertical-align:middle; margin-right:10px cursor:pointer; Flashbanner. Mask margin-bottom:3px;} </style> <script type= "Text/javascript" > $ (Function () {$ (". Flashbanner"). each (function () {var timer; $ (". Flashbanner. Mask img "). Click (function () {var index = $ (". Flashbanner. Mask img "). Index ($ (this)); CHANGEIMG (index); ). EQ (0). Click (); $ (this). Find (". Mask"). Animate ({"Bottom": "0"},700); $ (". Flashbanner"). Hover (function () {clearinterval (timer); },function () {timer = setinterval (function () {var Show = $ (". Flashbanner. Mask img.show"). index (); if (Show >= $ (". Flashbanner. Mask img"). length-1) show = 0; else show + +; Changeimg (show); },3000); }); function Changeimg (index) {$ (". Flashbanner. Mask img"). Removeclass ("show"). EQ (index). addclass ("show"); $ (". Flashbanner. Bigimg "). Parents (" a "). attr (" href ", $ (". Flashbanner. Mask img "). EQ (index). attr (" link "); $ (". Flashbanner. Bigimg"). Hide (). attr ("src", $ (". Flashbanner. Mask img"). EQ (index). attr ("uri")). FadeIn ("slow"); Timer = setinterval (function () {var show = $ ('. Flashbanner. Mask img.show '). index (); if (Show >= $ (". Flashbanner. Mas K img "). length-1) show = 0; else show + +; Changeimg (show); },3000); }); }); </script> </head> <body> <div class= "Flashbanner" > <a href= "/" ><img class= "bigimg" WidtH= "782" height= "326"/></a> <div class= "Mask" > <img src= "11.jpg" uri= "11.jpg" link= "/" width= "60" Height= "/>" <img src= "22.jpg" uri= "22.jpg" link= "/" width= "," height= ","/> <img src= "33.jpg" uri= "33. JPG "link="/"width=" "height="/> <img src= "44.jpg" uri= "44.jpg" link= "/" width= "" height= ""/> <img Src= "55.jpg" uri= "55.jpg" link= "/" width= "height="/> </div> </div> <div style= "Text-align: center;margin:50px 0; Font:normal 14px/24px ' MicroSoft Yahei '; > </div> </body> </html> |
I hope this article will help you with your jquery programming.
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
