Effect preview: HTTP://RUNJS.CN/DETAIL/VYDINIBC
Automatic focus chart with left and right arrows: Http://runjs.cn/detail/wr1d1keh
Html:
<divclass="recommend"> <divclass="pic"Id="Fade"> <ul> <li><a href="#">"http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg"/></a></li> <li><a href="#">"http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_32.jpg"/></a></li> <li><a href="#">"http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_38.jpg"/></a></li> </ul> <ol> <liclass="Active"><a href="javascript:;">"http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg"/></a></li> <li><a href="javascript:;">"http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_32.jpg"/></a></li> <li><a href="javascript:;">"http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_38.jpg"/></a></li> </ol> <p> Content 1~</p> </d Iv>
Css:
BODY,H1,H2,H3,H4,H5,P,DL,DD,UL,OL,FORM,INPUT,TEXTAREA,TH,TD,Select{margin:0; Padding0; } Em {font-Style:normal;} Li {List-Style:none;} A {text-Decoration:none;} img {border:none; vertical-Align:top;} Table {Border-Collapse:collapse;} Input,textarea {outline:none;} textarea {resize:none; overflow:auto;} Body {font-size:12px; Font-family:"Microsoft Ya-Black"; } . recommend. pic {width:294px; height:168px; padding:12px 12px0; Background: #f8f8f8; position:relative; Margin0Auto border-radius:6px;} . recommend. pic ul {width:223px; height:133px; position:absolute; top:12px; left:12px;} . recommend. pic ul Li {width:223px; height:133px; border:1px solid #fff; position:absolute; Top:0; Left0; } . recommend. pic ul img {width:223px; height:133px;} . recommend. pic ol {position:absolute; top:12px; right:12px;} . recommend. pic ol li,.recommend. Pic ol img {width:54px; height:30px;} . recommend. pic ol Li {border:3px solid #fff; margin-bottom:13px;} . recommend. pic ol. Active {border:3px solid #d6191d;} . recommend. pic P { Line-height:32px; position:absolute; left:12px; bottom:0px;} . recommend. list {padding:18px 26px0; } . recommend. list Li {height:27px; vertical-Align:middle;} . recommend. List em {float: Left; Color: #dfdfdf; margin-right:7px;} . recommend. List em img {margin-right:3px;} . recommend. List A {float: Left; color:#454545; } . recommend. list A:hover {text-Decoration:underline;} . Recommend. list span {float: Right; font-family:arial; font-size:12px; color:#999; }
Js:
//Auto-Play Focus chart(function () {varOdiv = $ ('#fade'); varAulli = Odiv.find ('ul Li'); varAolli = Odiv.find ('ol Li'); varOP = Odiv.find ('P'); vararr = ['content 1~','Content 2','Content 3' ]; varInow =0; varTimer =NULL; Fnfade (); Aolli.click (function () {Inow= $( This). index (); Fnfade (); }); Odiv.hover (function () {clearinterval (timer);}, AutoPlay); function AutoPlay () {Timer=setinterval (function () {Inow++; Inow%=arr.length; Fnfade (); }, -); } autoPlay (); function Fnfade () {Aulli.each (function (i) {if(I! =Inow) {Aulli.eq (i). FadeOut (). CSS ('ZIndex',1); Aolli.eq (i). Removeclass ('Active'); } Else{aulli.eq (i). FadeIn (). CSS ('ZIndex',2); Aolli.eq (i). addclass ('Active'); } }); Op.text (Arr[inow]); } })();
jquery Automatic Focus Chart