三个Javascript内容切换效果类
三个Javascript内容切换类及演示(滚动切换、左右切换、Tab切换)
1.滚动切换
类定义：
Class RollingPhotofunction RollingPhoto(photoBox)
{
this.direction="top"; this.screenRecordCount=4; this.speed=5; this.delay=1000; this.records=[]; var _this=this; var _playId=0; var _delayId=0; var _intervalValue=10; var _currentRollingHeight=0; 
var initialize=function(){ for(var i=0;i<photoBox.childNodes.length;i++){ if(photoBox.childNodes[i].tagName=="LI"){ _this.records.push(photoBox.childNodes[i]);
} } photoBox.style.top=photoBox.style.top?photoBox.style.top:0; updateRollingHeight(); }; var updateRollingHeight=function(){ _currentRollingHeight=0; for(var i=0;i<_this.screenRecordCount;i++){ _currentRollingHeight+=_this.records[i].offsetHeight; } }; this.play=function(){ switch (_this.direction.toLowerCase()) { case "top": function rolling(){ if (parseInt(photoBox.style.top) != -_currentRollingHeight) { if (parseInt(photoBox.style.top) - _this.speed >= -_currentRollingHeight) { photoBox.style.top = parseInt(photoBox.style.top) - _this.speed + "px"; } else { photoBox.style.top = parseInt(photoBox.style.top) - (_currentRollingHeight + parseInt(photoBox.style.top))+"px"; } } else { for (var i = 0; i < _this.screenRecordCount; i++) { photoBox.appendChild(_this.records[0]); _this.records.push(_this.records[0]); _this.records.splice(0, 1); } photoBox.style.top = "0px"; updateRollingHeight(); window.clearInterval(_playId); window.clearTimeout(_delayId); _delayId = window.setTimeout(_this.play, _this.delay); } } _playId=window.setInterval(rolling,_intervalValue); break; } }; this.stop=function(){ window.clearInterval(_playId); }; initialize();
}
完整代码：
Rolling Photo
<!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"> <style type="text/css"> ul{}{ margin:0; padding:0; } li{}{ padding:0; margin:0; list-style:none; } </style> <script type="text/javascript"> function RollingPhoto(photoBox){ this.direction="top"; this.screenRecordCount=2; this.speed=5; this.delay=1000; this.records=[]; var _this=this; var _playId=0; var _delayId=0; var _intervalValue=10; var _currentRollingHeight=0; var initialize=function(){ for(var i=0;i<photoBox.childNodes.length;i++){ if(photoBox.childNodes[i].tagName=="LI"){ _this.records.push(photoBox.childNodes[i]); } } photoBox.style.top=photoBox.style.top?photoBox.style.top:0; updateRollingHeight(); }; var updateRollingHeight=function(){ _currentRollingHeight=0; for(var i=0;i<_this.screenRecordCount;i++){ _currentRollingHeight+=_this.records[i].offsetHeight; } }; this.play=function(){ switch (_this.direction.toLowerCase()) { case "top": function rolling(){ if (parseInt(photoBox.style.top) != -_currentRollingHeight) { if (parseInt(photoBox.style.top) - _this.speed >= -_currentRollingHeight) { photoBox.style.top = parseInt(photoBox.style.top) - _this.speed + "px"; } else { photoBox.style.top = parseInt(photoBox.style.top) - (_currentRollingHeight + parseInt(photoBox.style.top))+"px"; } } else { for (var i = 0; i < _this.screenRecordCount; i++) { photoBox.appendChild(_this.records[0]); _this.records.push(_this.records[0]); _this.records.splice(0, 1); } photoBox.style.top = "0px"; updateRollingHeight(); window.clearInterval(_playId); window.clearTimeout(_delayId); _delayId = window.setTimeout(_this.play, _this.delay); } } _playId=window.setInterval(rolling,_intervalValue); break; } }; this.stop=function(){ window.clearInterval(_playId); }; initialize(); } function $(id){ return typeof(id)=="string"?document.getElementById(id):id; } window.onload=load; function load(){ var rp=new RollingPhoto($("photoBox")); window.setTimeout(rp.play,rp.delay); } </script> </head> <body> <div style="position:relative;overflow:hidden;height:200px;width:300px;border:1px solid red;"> <ul id="photoBox" style="position:absolute;margin:0;"> <li>1<img src="images/1.jpg" /></li> <li>2<img src="images/2.jpg" /></li> <li>3<img src="images/3.jpg" /></li> <li>4<img src="images/4.jpg" /></li> <li>5<img src="images/5.jpg" /></li> <li>6<img src="images/1.jpg" /></li> <li>7<img src="images/2.jpg" /></li> <li>8<img src="images/3.jpg" /></li> <li>9<img src="images/4.jpg" /></li> <li>10<img src="images/5.jpg" /></li> </ul> </div> </body></html>
演示：
http://www.net320.com/random/web/jsdemo1/rollingphoto.html
2.Tab切换
类定义：
Class Tabfunction TabPage(){ this.tabHead=null; this.tabBody=null; var _this=this; this.active=function(){ _this.tabBody.style.display="block"; _this.tabHead.style.backgroundColor="#c0c0c0"; }; this.inactive=function(){ _this.tabBody.style.display="none"; _this.tabHead.style.backgroundColor=""; };}function Tab(tabBox){ this.tabPageList=[]; var _this=this; var _lastIndex=0; var initialize=function(){ for (var i = 0; i < tabBox.childNodes.length; i++) { //initialize tab heads if(tabBox.childNodes[i].tagName=="UL" && tabBox.childNodes[i].id=="tabHeads"){ for(var j=0;j<tabBox.childNodes[i].childNodes.length;j++){ if(tabBox.childNodes[i].childNodes[j].tagName=="LI"){ var tabPage=new TabPage(); tabPage.tabHead=tabBox.childNodes[i].childNodes[j]; _this.tabPageList.push(tabPage); tabPage=null; } } } //initialize tab bodies if (tabBox.childNodes[i].tagName == "UL" && tabBox.childNodes[i].id=="tabBodies") { var count=0; for(var j=0;j<tabBox.childNodes[i].childNodes.length;j++){ if(tabBox.childNodes[i].childNodes[j].tagName=="LI" && _this.tabPageList[count]){ _this.tabPageList[count++].tabBody=tabBox.childNodes[i].childNodes[j]; } } } } if (_this.tabPageList[0]) { _this.tabPageList[0].active(); } for(var i=1;i<_this.tabPageList.length;i++){ if (_this.tabPageList[i].tabBody) { _this.tabPageList[i].inactive(); } } }; this.switchTo=function(index){ if (_lastIndex != index && _this.tabPageList[index].tabBody) { _this.tabPageList[_lastIndex].inactive(); _this.tabPageList[index].active(); _lastIndex = index; } }; initialize();}
完整代码：
Tab<!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> <style type="text/css"> ul{}{ margin:0; } #tabHeads li{}{ float:left; list-style:none; background-color:#efefef; width:100px; margin:0 1px 0 1px; padding:0 0 0 5px; } #tabBodies li{}{ padding:5px 5px 5px 5px; list-style:none; width:500px; border:1px solid #cdcdcd; } </style> <script type="text/javascript"> function TabPage(){ this.tabHead=null; this.tabBody=null; var _this=this; this.active=function(){ _this.tabBody.style.display="block"; _this.tabHead.style.backgroundColor="#c0c0c0"; }; this.inactive=function(){ _this.tabBody.style.display="none"; _this.tabHead.style.backgroundColor=""; }; } function Tab(tabBox){ this.tabPageList=[]; var _this=this; var _lastIndex=0; var initialize=function(){ for (var i = 0; i < tabBox.childNodes.length; i++) { //initialize tab heads if(tabBox.childNodes[i].tagName=="UL" && tabBox.childNodes[i].id=="tabHeads"){ for(var j=0;j<tabBox.childNodes[i].childNodes.length;j++){ if(tabBox.childNodes[i].childNodes[j].tagName=="LI"){ var tabPage=new TabPage(); tabPage.tabHead=tabBox.childNodes[i].childNodes[j]; _this.tabPageList.push(tabPage); tabPage=null; } } } //initialize tab bodies if (tabBox.childNodes[i].tagName == "UL" && tabBox.childNodes[i].id=="tabBodies") { var count=0; for(var j=0;j<tabBox.childNodes[i].childNodes.length;j++){ if(tabBox.childNodes[i].childNodes[j].tagName=="LI" && _this.tabPageList[count]){ _this.tabPageList[count++].tabBody=tabBox.childNodes[i].childNodes[j]; } } } } if (_this.tabPageList[0]) { _this.tabPageList[0].active(); } for(var i=1;i<_this.tabPageList.length;i++){ if (_this.tabPageList[i].tabBody) { _this.tabPageList[i].inactive(); } } }; this.switchTo=function(index){ if (_lastIndex != index && _this.tabPageList[index].tabBody) { _this.tabPageList[_lastIndex].inactive(); _this.tabPageList[index].active(); _lastIndex = index; } }; initialize(); } function $(id){ return typeof(id)=="string"?document.getElementById(id):id; } window.onload=load; function load(){ var tabBox=$("tabBox"); var tab=new Tab(tabBox); var tabHeads=$("tabHeads"); var count=0; for(var i=0;i<tabHeads.childNodes.length;i++){ if(tabHeads.childNodes[i].tagName=="LI"){ tabHeads.childNodes[i].onmousemove = (function(j){ return function(){ tab.switchTo(j); } })(count++); } } } </script> </head> <body> <div id="tabBox"> <ul id="tabHeads"> <li>tab1</li> <li>tab2</li> <li>tab3</li> <li>tab4</li> </ul> <br/> <ul id="tabBodies"> <li><div>tab1 content tab1 content tab1 content<br/>tab1 content tab1 content tab1 content<br/>tab1 content<br/>tab1 content<br/></div><img src="images/1.jpg" /></li> <li><div>tab2 content<br/>tab2 content tab2 content tab2 content<br/>tab2 content<br/>tab2 content<br/></div><img src="images/2.jpg" /></li> <li><div>tab3 content<br/>tab3 content tab3 content tab3 content<br/>tab3 content tab3 content tab3 content<br/>tab3 content<br/></div><img src="images/3.jpg" /></li> <li><div>tab4 content<br/>tab4 content<br/>tab4 content<br/>tab4 content<br/></div><img src="images/4.jpg" /></li> </ul> </div> </body></html>
演示：
http://www.net320.com/random/web/jsdemo1/tab.html
3.左右切换
类定义：
Class SwitchPhotofunction PhotoFrame(photoFrameObject){ this.entity=photoFrameObject; var _this=this; this.hidden=function(){ _this.entity.style.display="none"; }; this.show=function(){ _this.entity.style.display="block"; };}function SwitchPhoto(photoBox){ this.photoBoxList = []; var _this = this; var _currentIndex = 0; var initialize = function(){ for (var i = 0; i < photoBox.childNodes.length; i++) { if (photoBox.childNodes[i].tagName == "LI") { _this.photoBoxList.push(new PhotoFrame(photoBox.childNodes[i])); } } for(var i=1;i<_this.photoBoxList.length;i++){ _this.photoBoxList[i].entity.style.display="none"; } }; this.toSwitch = function(direction){ if (_this.photoBoxList.length > 0) { _this.photoBoxList[_currentIndex].hidden(); _currentIndex = direction>=0?++_currentIndex % _this.photoBoxList.length:(_this.photoBoxList.length+(--_currentIndex))%_this.photoBoxList.length; _this.photoBoxList[_currentIndex].show(); } }; initialize();}
完整代码：
SwitchPhoto<!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> <style type="text/css"> ul{}{ margin:0; padding:0; } li{}{ margin:0; padding:0; list-style:none; } </style> <script type="text/javascript"> function PhotoFrame(photoFrameObject){ this.entity=photoFrameObject; var _this=this; this.hidden=function(){ _this.entity.style.display="none"; }; this.show=function(){ _this.entity.style.display="block"; }; } function SwitchPhoto(photoBox){ this.photoBoxList = []; var _this = this; var _currentIndex = 0; var initialize = function(){ for (var i = 0; i < photoBox.childNodes.length; i++) { if (photoBox.childNodes[i].tagName == "LI") { _this.photoBoxList.push(new PhotoFrame(photoBox.childNodes[i])); } } for(var i=1;i<_this.photoBoxList.length;i++){ _this.photoBoxList[i].entity.style.display="none"; } }; this.toSwitch = function(direction){ if (_this.photoBoxList.length > 0) { _this.photoBoxList[_currentIndex].hidden(); _currentIndex = direction>=0?++_currentIndex % _this.photoBoxList.length:(_this.photoBoxList.length+(--_currentIndex))%_this.photoBoxList.length; _this.photoBoxList[_currentIndex].show(); } }; initialize(); } function $(id){ return typeof(id)=="string"?document.getElementById(id):id; } window.onload=load; function load(){ var switchPhoto=new SwitchPhoto($("photoBox")); $("btnSwitchRight").onclick = function(){ switchPhoto.toSwitch(1); }; $("btnSwitchLeft").onclick = function(){ switchPhoto.toSwitch(-1); }; } </script> </head> <body> <input type="button" id="btnSwitchLeft" value="< -" /> <input type="button" id="btnSwitchRight" value="- >" /> <div> <ul id="photoBox"> <li><div>1</div><img src="images/1.jpg" /></li> <li><div>2</div><img src="images/2.jpg" /></li> <li><div>3</div><img src="images/3.jpg" /></li> <li><div>4</div><img src="images/4.jpg" /></li> <li><div>5</div><img src="images/5.jpg" /></li> </ul> </div> </body></html>
演示：
