<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> picture Player _ Picture Rotation _ Focus effect </title> <style type=" Text/css "> #focus_m {position:re lative; width:420px; height:384px; Background: #133775} f_img_roll{width:350px; height:300px; position:relative;} . f_img_roll Img{position:absolute; left:0; top:0; width:350px; height:300px; F_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0; . f_img_tree Div{position:absolute; z-index:201 top:3px; right:0; width:75px; height:47px; Background:url (http:// www.kuanghong.com/han/images/mask.gif) No-repeat;} . f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0; . f_img_tree li{width:60px; height:45px border:1px solid #0066cc; margin-top:3px; . f_img_tree img{width:54px; height:39px border:3px solid #000066; vertical-align:top; . F_con{color: #fff; height:70px;} . F_con. f_title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;} . F_con. F_title a:link, F_con. F_title a:visited{color: #fff; Text-decoration:none} f_con. F_title a:hover{text-dec Oration:underline} f_con. f_con{font-size:12px; padding:0 10px; height:40px; line-height:150%;} </style> <script type= "Text/javascript" > Function $A (iterable) {var results = []; for (var i = 0; i < iterable.length i++) Results.push (iterable[i)); return results; } Function.prototype.bind = Function () {var __method = this, args = $A (arguments), object = Args.shift (); return function () {return __method.apply (object, Args.concat ($A (arguments))); } var IMGs = [{max: ' Http://www.kuangHong.com/han/images/img_1.jpg ', min: ' http://www.kuanghong.com/han/images/img_1s.jpg ', url: ' # ', title: ' Title 01 title 01 Title 01 Title 01 title A ', Con: ' contents 01 contents 01 Contents 01 Contents 01 Contents 01 Contents 01 Contents 01 Contents 01 Contents 01 Contents 01 Content 01 Content 01 Content 01 Content 01 Content 01 Content 01 Content 01 Contents ' Http://www.kuanghong.com/han/images/img_2.jpg ', min: ' http://www.kuanghong.com/han/images/img_2s.jpg ', url: ' # ', Title: ' Heading 02 title 02 title 02 Title 02 title ', Con: ' contents 02 contents 02 Contents 02 Contents 02 Contents 02 Contents 02 Contents 02 Contents 02 Contents 02 Contents 02 Contents 02 Content 02 Content 02 Content 02 Contents 02 Content 02 Content 02 Content 02 {max: ' http://www.kuanghong.com/han/images/img_3.jpg ', min: ' http://www.kuanghong.com/han/images/img_3s.jpg ', url: ' # ', title: ' title 03 title 03 Title 03 Title 03 title ', Con: ' Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 Content 03 content 03 content '}, {max: ' Http://www.kuanghong.com/ha N/images/img_4.jpg ', min: ' http://www.kuanghong.com/han/images/img_4s.jpg ', url: ' # ', title: ' title 04 title 04 Title 04 Title 04 Title 04 ', Con: ' content 04 content 04 Content 04 Content 04 Content 04 Content 04 Content 04 Content 04 Contents 04 Contents 04 Content 04 Content 04 Contents 04 Content 04 Content 04 Content 04 Content 04 content '}, {max: ' http://www.kuanghong.c Om/han/images/img_5.jpg ', min:' http://www.kuanghong.com/han/images/img_5s.jpg ', url: ' # ', title: ' title 05 title 05 Title 05 Title 05 title ', Con: ' Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 Content 05 content 05 content '}, {max: ' Http://www.kuanghong.com/ha N/images/img_6.jpg ', min: ' http://www.kuanghong.com/han/images/img_6s.jpg ', url: ' # ', title: ' title 06 title 06 Title 06 Title 06 Title 06 ', Con: ' content 06 content 06 Content 06 Content 06 Content 06 Contents 06 Contents 06 Contents 06 Contents 06 Contents 06 Contents 06 Contents 06 Contents 06 Contents 06 Contents 06 Contents 06 Contents 06 '}]; function focus () {this.initialize.apply (this,arguments)} Focus.prototype = {initialize:function (img S, FC, Tim, speed) {This.imgs = IMGs; This.tim = tim*1000 | | 2000; This.speed = Speed | | 0.3; THIS.T = null; Action timer this.tm = null; Picture timing THIS.TB = null; Slider timer This.cur_i = 0; Current picture Position this.move = false; Whether in the sports This.tem = 0; Temporary data This.posto = 0; Sliding block Destination This.over = 0; var ds = document.getElementById (FC). getElementsByTagName (' div '); var di = ds[0]; This.img_m = document.createelement (' img '); this.img_m2 = This.img_m.cloneNode (true); var dm = ds[1]; This.title = ds[3]; This.con = ds[4]; This.mask = document.createelement (' div '); THIS.UL = document.createelement (' ul '); This.lis = []; This.img_m.style.zIndex = 101; This.img_m2.style.zIndex = 100; Di.appendchild (this.img_m); Di.appendchild (THIS.IMG_M2); DI = null; Dm.appendchild (This.mask); Dm.appendchild (THIS.UL); DM = null; This.imG_cache (); This.load (); }, Img_cache:function () {var img = new Image (); for (var i=0; i<this.imgs.length; i++) img.src = This.imgs[i].max; }, Stop:function () {cleartimeout (THIS.T); This.over = 1; }, Start:function () {this.over = 0; THIS.T = settimeout (This.f_next.bind (this,null), this.tim); }, Load:function () {var imgs = This.imgs; THIS.IMG_M.SRC = Imgs[0].max; Load default large image This.title.innerHTML = ' +imgs[0].title+ '; Title This.con.innerHTML = Imgs[0].con; Content var othis = this; for (var i=0; I '; Li.i = i; This.lis.push (LI); This.ul.appendChild(LI); var lis = this.ul.childNodes; for (var i=0; i<lis.length; i++) {lis[i].onmouseover = function () {this.style.border= "1px solid #cc 0000 "; } lis[i].onmouseout = function () {this.style.border= "1px solid #0066cc";} } THIS.T = settimeout (This.f_next.bind (this,null), this.tim); This.title.parentNode.onmouseover = This.stop.bind (this); This.title.parentNode.onmouseout = This.start.bind (this); }, F_next:function (n) {if (THIS.TB) clearinterval (THIS.TB); if (THIS.T) cleartimeout (THIS.T); if (this.tm) clearinterval (THIS.TM); if (n) this.cur_i = n-1; var top = 0; if (n!=0 && this.imgs[this.cur_i+1]) {this.posto = This.lis[this.cur_i+1].offsettop; This.cur_i =this.cur_i+1; }else{This.posto = this.lis[0].offsettop; This.cur_i = 0; } This.tem = This.mask.offsetTop; This.tem > This.posto? top = 1:top = 0; THIS.TB = SetInterval (This.moveTo.bind (this, top), 25); }, Moveto:function (top) {if (!top) {if (this.tem+1.8) >=this.posto+1) {this.mask.style.top = this.posto+ ' px '; Clearinterval (THIS.TB); This.img_swap (); Return } This.tem + = (this.posto-this.tem) *this.speed}else{if (this. tem-1.8) <=this.posto-1) {this.mask.style.top = this.posto+ ' px '; Clearinterval (THIS.TB); This.img_swap (); Return } This.tem-= (This.tem-this.posto) *this.speed; } this.mask.style.top = this.tem+ ' px '; }, Img_swap:function () {var t, B; if (this.img_m.style.zindex>this.img_m2.style.zindex) {t = this.img_m; b = this.img_m2; }else{t = this.img_m2; b = this.img_m; } This.title.innerHTML = ' +this.imgs[this.cur_i].title+ '; This.con.innerHTML = This.imgs[this.cur_i].con; B.SRC = This.imgs[this.cur_i].max; /msie/.test (navigator.useragent)? This.tem = T.style.filter? T.style.filter.replace (/^.+= (\d+). +$/, ' $ '): 100:this.tem = t.style.opacity? t.style.opacity*100:100; This.tm = SetInterval (This.img_hid.bind (This, T, b), 25; }, Img_hid:function (t,b) {this.tem-= 5; if (/msie/.test (navigator.useragent)) T.style.filter = ' alpha (opacity= ' +this.tem+ ') '; else t.style.opacity = this.tem/100; if (This.tem <=0) {clearinterval (THIS.TM); var tz = T.style.zindex; var BZ = B.style.zindex; T.style.zindex = BZ B.style.zindex = TZ; if (/msie/.test (navigator.useragent)) T.style.filter = ' alpha (opacity=100) '; else t.style.opacity = 1; if (this.over) return; THIS.T = settimeout (This.f_next.bind (this, null), This.tim); Continue loop}} window.onload = function () { New Focus (IMGs, ' focus_m '); } </script> </pead> <body> <div id= "Focus_m" > <div class= "F_img_roll" ></div>& Lt;div class= "F_img_tree" ></div> <div class= "F_con" > <div class= "f_title" ></div> & Lt;div class= "F_con" ></div> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
