jquery for picture transitions (ie,ff,goole) to work

Here first set the style of the label (I use only 3 pictures here, can be added according to their own situation)

1 <style type= "Text/css" >2         3         /*Show picture Toggle div style*/4 #ShowImg{5 width:599px;6 Height:324px;7 Background-image:URL ("imgs/1.jpg");/*Note your picture path and picture name*/8 margin:0 Auto;9}Ten          /*the div that displays the Click toggle Button*/ One #Nav{ A Height:26px; - Padding-top:280px; - Padding-left:480px; the              -} -         /*here is the toggle button, here with the LI implementation*/ - #Nav ul Li{ + Display:Block; - font-size:9px; + Padding-top:3px; A float: Left; at margin:2px; - width:19px; - cursor:Pointer; - Color:#7f0019; - font-family:"Arial"; - Height:19px; in Background-color:#fff; - Border:1px solid #cecece; to text-align:Center; +} - </style>

Then the JS code:

1<!--introduce Jquer script--2<script src= "Script/jquery-1.8.0.min.js" ></script>3     4<!--JS Code specifically implemented:-->5<script type= "Text/javascript" >6$(function () {7           8             //Open a timer, set an appropriate time period, so that the picture to achieve a constant switch effect, here is set 1000MS is 1m9SetInterval (function () {Ten                 //get its value from the flag of the hidden field first One                 varJ = $ ("#flag"). Val (); A                 //if the value is equal to-1, the Convention is that the mouse is on the button and nothing is done and returns directly.  -                 if(J==-1) { -                     return; the                 } -                 //otherwise, the corresponding event is set according to the value of J. -                 varLits = $ ("#Nav Li"); -                 if(j-1>=0) { +Setstylemouseleave (lits[j-1]); -}Else { +Setstylemouseleave (lits[2]); A                 } at  - Setstylemouseover (Lits[j]); -  -J + +; -                 if(j>2) { -j = 0; in                 } -$ ("#flag"). Val (j); to  +}, 1000); -  the             //get all the LI elements under Div nav, and bind the mouse for them to enter, and the mouse to leave the event *$ ("#Nav li"). MouseOver (function(i) { $ Panax Notoginseng                 //The function modifies its own style, as well as the picture -Setstylemouseover ( This); the                 //sets the style of the sibling element, which is the remaining two Li +$( This). Siblings (). css ({ AColor: ' RGB (127, 0, 25) ', theFontWeight: ' Normal ', +Background: ' RGB (255, 255, 255) ', -                 }); $               //set the flag value to 1 to achieve the pause timer effect $$ ("#flag"). Val ("-1")); -  -  the             }) -. MouseLeave (function () {Wuyi  the                           //to set your own style when the mouse leaves -Setstylemouseleave ( This); Wu                             //gets the properties of N in the current Li and, based on the value of N, determines which Li is selected when the timer is executed again -                             varn = $ ( This). attr ("n"); About  $                             if(N/1 + 1 <= 2) { -n = n*1 + 1; -}Else { -n = 0; A                             } +                            //The value of flag is updated after the mouse is left, so that the value of flag is exactly equal to the value of the attribute N of the Li to be traversed next, in order to achieve the effect of restarting the timer, but the timer never stops, nor does the restart function the$ ("#flag"). val (n); -                         });; $  the         }); the  the         //Two common functions encapsulated the  -         functionSetstylemouseover (LI) { in  the $ (LI). css ({ theColor: ' RGB (255, 255, 255) ', AboutFontWeight: ' Bolder ', theBackground: ' RGB (218, 10, 10) ', the             }); the             varurl = $ (li). attr ("url"); +$ ("#ShowImg"). CSS ("background-image", "url (" + URL + ")"); -         } the Bayi         functionSetstylemouseleave (LI) { the  the $ (LI). css ({ -Color: ' RGB (127, 0, 25) ', -FontWeight: ' Normal ', theBackground: ' RGB (255, 255, 255) ', the             }); the         the         } -  the</script>

View Code

And finally the DOM element.

1 body>2     <DivID= "Showimg">3         <DivID= "Nav">4             <ul>5                 <!--the URL attribute and the N attribute are added myself, for programming convenience, the label itself does not have these attributes, note that the URL here is based on the actual location of the picture you place to set the value -6                 <LiURL= "Imgs/1.jpg"N= "0"style= "Color:rgb (255, 255, 255); font-weight:bolder; Background:rgb (218, ten);">1</Li>7                 <LiURL= "Imgs/2.gif"N= "1" >2</Li>8                 <LiURL= "Imgs/3.jpg"N= "2" >3</Li>9                Ten             </ul> One         </Div> A     </Div> -     <!--Identification - -     <inputtype= "hidden"name= "Name"ID= "Flag"value= "1" /> the </Body>

jquery for picture transitions (ie,ff,goole) to work