Example analysis of jquery image switching

Source: Internet
Author: User
Tags setinterval

This example describes the implementation of jquery image switching. Share to everyone for your reference. 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 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 <! 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> <script language=" javascript "src=" inc/ Jquery-1.4.2.js "></script> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Untitled document </title> </head> <style type=" Text/css "> #butt div{width : 122px; height:32px; Float:left; Text-align:center; } </style> <script language= "JavaScript" > Function tab_q (now_id) {if (now_id = null) {//alert ($ ("#butt"). Fi nd ("div:visible"). attr ("id")) c_show_id = $ ("#cont"). Find ("Div:visible"). attr ("id"); The ID name of the button is displayed nums_id = c_show_id.substring (1,3); Intercept the B1 after the 1, as a string into the C behind b_show_id = "B" + nums_id; The ID name of the content is displayed Nums_next = parseint (nums_id) +1//alert (Nums_next) if (nums_next<=8)//If the last one, then it is necessary to skip back to the first {} else {num S_next = 1}}else {nums_next = now_id.substring (1,3);} $ ("#cont div"). Hide (); LetAll the above div in the picture disappears. It's for Luo's place to let the next picture appear. $ ("#butt div"). css ({border: ' #FF0000 0px Solid '}); Let the borders of all the buttons disappear. is to make the Next button have a border,//alert ("#" + "C" +nums_next) $ ("#c" +nums_next). FadeIn ()//Let the picture above fade out $ ("#b" +nums_next). CSS ({border: ' # FF0000 1px solid '}); Add a border to the corresponding button below, of course this can also do other effects//plus borders just for testing} $ (function () {//When page load completes auto = SetInterval ("Tab_q ()", 2000);//Here Modify the switching time of $ (" #cont div "). each (function (i,n) {$ (n). Hover (function () {clearinterval (Auto)}, function () {Auto=setinterval (" tab_q () " , 2000); }) $ ("#butt div"). each (function (i,n) {$ (n). Hover (function () {clearinterval (auto); Tab_q ($ (this). attr ("id")}, function () {Auto=setinterval ("tab_q ()", 2000);}) }) </script> <body> <div style= "width:980px; height:275px; " > <div style= "width:980px; height:241px; Overflow:hidden; Text-align:center "id=" cont "> <div style=" width:980px; height:241px; Text-align:center "id=" C1 "><img src=" images/xmjz.jpg "width=" 980 "/> </div> <div style=" width:980px ; height:241px; Display:none; Text-align:center "id=" C2 "> <img src=" images/4037.jpg "width=" 980 "height=" 241 "/> </div> <div style= "width:980px; height:241px; Display:none; Text-align:center "Id=" C3 "><img src=" images/4041.jpg "width=" 980 "height=" 241 "/></div> <div "width:980px; height:241px; Display:none; Text-align:center "id=" C4 "> <img src=" images/xmjz.jpg "width=" 980 "/> </div> <div style=" width:980px ; height:241px; Display:none;text-align:center "id=" C5 "> <img src=" images/xmjz.jpg "width=" 980 "/> </div> <div Style = "width:980px; height:241px; Display:none;text-align:center "id=" C6 "> <img src=" images/xmjz.jpg "width=" 980 "/> </div> <div Style = "width:980px; height:241px; Display:none;text-align:center "id=" C7 "> <img src=" images/xmjz.jpg "width=" 980 "/> </div> <div Style = "width:980px; height:241px; Display:none;text-align:center "id=" C8 "> <img src=" images/xmjz.jpg "width=" 980 "/> </div> </div> <div style= "width:980px; height:31px; border: #FF0000 0px solid "id=" butt "> <div style=" Background-image:url (images/xmbtn_1.png) "id=" B1 "> </div > <div style= "Background-image:url (images/xmbtn_2.png)" id= "B2" > </div> <div style= " Background-image:url (images/xmbtn_2.png) "id=" B3 "> </div> <div style=" Background-image:url (images/ xmbtn_2.png) "id=" B4 "> </div> <div style=" Background-image:url (images/xmbtn_2.png) "id=" B5 "> </div > <div style= "Background-image:url (images/xmbtn_2.png)" id= "B6" > </div> <div style= " Background-image:url (images/xmbtn_2.png) "id=" B7 "> </div> <div style=" Background-image:url (images/ xmbtn_2.png) "id=" B8 "> </div> </div> </div> </body> </html>
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.