[Original] Simple implementation of jquery slides with thumbnails

Simple jquery slide effect with thumbnails (can be played automatically)

Images and truth:

CodeAs follows::

JS

 
VaR N, interval = NULL; // n: specify or mark the currently played image function time (INDEX) {n = index; interval = setinterval ("Play ()", 2000);} function play () {var COUNT = $ (". v_con> span "). length; n ++; If (n> count) {n = 0 ;}$ (". v_con> span IMG "). removeclass ("cur"); $ (". v_con> span IMG "). eq (n ). addclass ("cur"); var src = $ (". v_con> span IMG "). eq (n ). ATTR ("src"); $ (". max_img> IMG "). ATTR ("src", Src ). fadein (1500) ;}$ (function () {time (0); // call time (), which is automatically played from the first image by default $ (". v_con> span "). hover (function () {n = $ (". v_con> span "). index ($ (this)-1; // obtain the Index play () of the current image; // display the current image if (interval) {clearinterval (interval );}}, function () {time (n); // resume playing from the current image });});
 

Html

<Div class = "Container" style = "margin: 0 auto; margin-left: auto; margin-Right: auto; "> <Div class =" slide "> <ul> <! -- Display big chart --> <li class = "max_img">  </LI> </ul> <Div class = "thumbnail"> <! -- Thumbnail --> <! -- SPAN class = "Prev"> previous page </span --> <Div class = "v_show"> <Div class = "v_con"> <span>  </span>  </span>  </span>  </span> </div> </ div> <! -- SPAN class = "Next"> next page </span --> </div> <! -- Thumbnail end --> </div>

CSS

/* Style */. container {width: 552px; Height: 304px; margin: 0 auto ;}. slide {width: 550px; Height: auto; Border: 1px dotted # CCC; padding: 10px; text-align: Left; Background: URL (".. /images/slide/bg.jpg ") Repeat-X ;}. slide ul Li {border: 1px solid # CCC; padding: 10px; Background: # FFF; text-align: center ;}. slide ul Li IMG {border: 1px solid # Eee ;}. thumbnail {Height: 110px; margin-top: 10px ;}/*. prev ,. next {text-indent:-9999px; cursor: pointer; display: block; width: 24px; Height: 110px; float: Left ;}. prev {Background: URL (".. /images/slide/bg_l_1.gif ") No-Repeat ;}. next {Background: URL (".. /images/slide/bg_r_1.gif ") No-Repeat ;}*/. v_show {Height: 110px; width: 480px; float: Left; Background: URL (".. /images/slide/bg_c.gif ") Repeat-x 0-1px; overflow: hidden; position: relative; padding-left: 15px ;}. v_show. v_con {width: 2500px; text-align: Left; position: absolute; left: 7px; bottom: 10px ;}. v_show span {display: inline-block; width: 120px; Height: 76px; margin-top: 16px 0 0; cursor: pointer; text-align: center; Background: # Eee; text-align: center ;}. v_show span IMG {padding: 3px; Border: 1px solid # CCC; Background: # FFF ;}. v_show span IMG: hover ,. v_show span IMG. cur {border: Border: 1px solid # FFF; Background: # e80000 ;}