jquery implementation of enterprise site banner Focus Map Switching Function Example

Source: Internet
Author: User
Tags setinterval

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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.