<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>焦点图</title> <style type="text/css"> body {margin:0px;padding:0px;background:url(http://www.codefans.net/jscss/demoimg/201109/bg.jpg);} ul, li {margin:0px;padding:0px;float:left;list-style-type:none;} .frame {width:1010px;height:auto;overflow:hidden;margin:40px auto 0 auto;} .box {width:490px;height:170px;padding:1px;float:left;display:inline;margin:5px;background:#fff;position:relative;border:1px solid #dedede;} .list {width:490px;height:170px;float:left;overflow:hidden; position:relative;} .list ul {position:absolute;top:0px;left:0px;} .list li {width:490px;height:170px;float:left;} .list li.opacity {position:absolute;top:0px;left:0px;opacity:0;filter:alpha(opacity:0)} .but {width:105px;height:16px;right:1px;bottom:5px;position:absolute;z-index:1;} .but li {width:14px;height:14px;float:left;color:#fff;font-size:10px;text-align:center;line-height:14px;font-family:Verdana;background:#bbb;display:inline;margin:0 5px 0 0;cursor:pointer;border:1px solid #a9abaa;} .but li.hove {background:#ff902a;border:1px solid #ff6502;} </style> <script type="text/javascript"> function $(id){ return typeof id === "string" ? document.getElementById(id) : id; } function $$(oParent, elem){ return (oParent || document).getElementsByTagName(elem); } function $$$(oParent, sClass){ var aElem = $$(oParent, '*'); var aClass = []; var i = 0; for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]); return aClass; } function Slide(){ this.initialize.apply(this, arguments); } Object.extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; } return destination; }; Slide.prototype = { initialize : function(obj, list, but, hove, onEnd){ if($(obj)){ this.obj = $(obj); this.oList = $$$(this.obj, list)[0]; this.oUl = $$(this.oList, 'ul')[0]; this.aList = $$(this.oList, 'li'); this.aListH = this.aList[0].offsetHeight; this.aListW = this.aList[0].offsetWidth; this.oBut = $$$(this.obj, but)[0]; this.aBut = $$(this.oBut, 'li'); this.oEve(onEnd); this.oAction = this.onEnd.action; this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click"; this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play"; if(this.oAction == 'top'){ this.oUl.style.height = this.aListH * this.aList.length +'px'; }else if(this.oAction == 'left'){ this.oUl.style.width = this.aListW * this.aList.length +'px'; }else if(this.oAction == 'opacity'){ this.oUl.style.height = this.aListH +'px'; var i = 0; for(i=0;i<this.aList.length;i++){ this.aList[i].style.position = 'absolute'; this.aList[i].className = 'opacity'; } this.aList[0].className = ''; }else{ this.oUl.style.height = this.aListH * this.aList.length +'px'; } this.getEvent(hove); } }, oEve: function(onEnd){ this.onEnd = { method : 'click', autoplay: 'stop' }; Object.extend(this.onEnd, onEnd || {}); }, addEvent : function(oElm, strEvent, fuc) { window.addEventListener ? oElm.addEventListener(strEvent, fuc, false) : oElm.attachEvent('on' + strEvent, fuc); }, getEvent : function(hove) { var _this = this; var i = iNow = 0; for(i=0;i<this.aBut.length;i++){ (function(){ var j = i; _this.addEvent(_this.aBut[j], _this.method, function(){ _this.fnClick(j, hove); _this.autoPlayTab(j, hove); }); })(); } this.autoPlayTab(i, hove); }, autoPlayTab : function(iNow, hove){ if(this.autoplay == 'play'){ var _this = this; this.iNow = iNow; this.obj.onmouseover = function(){ clearInterval(_this.timer); }; this.obj.onmouseout = function(){ clearInterval(_this.timer); _this.timer = setInterval(playTab,3000); }; clearInterval(_this.timer); _this.timer = setInterval(playTab,3000); function playTab(){ if(_this.iNow == _this.aBut.length)_this.iNow = 0; _this.fnClick(_this.iNow, hove); _this.iNow++; } } }, fnClick : function(oBut, hove){ var i = 0; for(i=0;i<this.aBut.length;i++)this.aBut[i].className = ''; this.aBut[oBut].className = hove; if(this.oAction == 'top'){ this.sMove(this.oUl, {top:-(this.aListH * oBut)}); }else if(this.oAction == 'left'){ this.sMove(this.oUl, {left:-(this.aListW * oBut)}); }else if(this.oAction == 'opacity'){ var i = 0; for(i=0;i<this.aList.length;i++){ this.sMove(this.aList[i], {opacity:0}); } this.sMove(this.aList[oBut], {opacity:100}); }else{ this.sMove(this.oUl, {top:-(this.aListH * oBut)}); } }, getStyle : function(obj, attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr]; }, sMove : function(obj, json, onEnd){ var _this = this; clearInterval(obj.timer); obj.timer = setInterval(function(){ _this.dMove(obj, json, onEnd); },30); }, dMove : function(obj, json, onEnd){ this.attr = ''; this.bStop = true; for(this.attr in json){ this.iCur = 0; this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr)); this.iSpeed = (json[this.attr] - this.iCur) / 7; this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed); if(json[this.attr] != this.iCur)this.bStop = false; if(this.attr == 'opacity'){ obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')'; obj.style.opacity = (this.iCur + this.iSpeed ) / 100; }else{ obj.style[this.attr] = this.iCur + this.iSpeed + 'px'; } } if(this.bStop){ clearInterval(obj.timer); if(onEnd)onEnd(); } } }; </script> <script type="text/javascript"> window.onload = function(){ new Slide('box', 'list', 'but', 'hove', {action : 'opacity'}); new Slide('box1', 'list', 'but', 'hove', {method : 'mouseover', action : 'top', autoplay : 'play'}); new Slide('box2', 'list', 'but', 'hove', {action : 'left', autoplay : 'play'}); new Slide('box3', 'list', 'but', 'hove', {action : 'opacity', autoplay : 'play'}); }; </script> </head> <body> <div class="frame"> <div class="box" id="box"> <div class="list"> <ul> <li><img src="http://www.codefans.net/jscss/demoimg/201109/01.png" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/02.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/03.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/04.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/05.jpg" /></li> </ul> </div> <div> <div class="but"> <ul> <li class="hove">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> <div class="box" id="box1"> <div class="list"> <ul> <li><img src="http://www.codefans.net/jscss/demoimg/201109/01.png" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/02.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/03.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/04.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/05.jpg" /></li> </ul> </div> <div> <div class="but"> <ul> <li class="hove">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> <div class="box" id="box2"> <div class="list"> <ul> <li><img src="http://www.codefans.net/jscss/demoimg/201109/01.png" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/02.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/03.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/04.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/05.jpg" /></li> </ul> </div> <div> <div class="but"> <ul> <li class="hove">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> <div class="box" id="box3"> <div class="list"> <ul> <li><img src="http://www.codefans.net/jscss/demoimg/201109/01.png" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/02.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/03.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/04.jpg" /></li> <li><img src="http://www.codefans.net/jscss/demoimg/201109/05.jpg" /></li> </ul> </div> <div> <div class="but"> <ul> <li class="hove">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> </div> </body> </html>