1.滚动切换

类定义：

Class RollingPhoto
function 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="data:images/1.jpg" /></li>
                <li>2<img src="data:images/2.jpg" /></li>
                <li>3<img src="data:images/3.jpg" /></li>
                <li>4<img src="data:images/4.jpg" /></li>
                <li>5<img src="data:images/5.jpg" /></li>
                <li>6<img src="data:images/1.jpg" /></li>
                <li>7<img src="data:images/2.jpg" /></li>
                <li>8<img src="data:images/3.jpg" /></li>
                <li>9<img src="data:images/4.jpg" /></li>
                <li>10<img src="data:images/5.jpg" /></li>
            </ul>
        </div>
    </body>
</html>

演示：

http://www.net320.com/random/web/jsdemo1/rollingphoto.html

2.Tab切换

类定义：

Class Tab
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();
}

完整代码：

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="data: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="data: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="data:images/3.jpg" /></li>
                <li><div>tab4 content<br/>tab4 content<br/>tab4 content<br/>tab4 content<br/></div><img src="data:images/4.jpg" /></li>
            </ul>
        </div>
    </body>
</html>

演示：

http://www.net320.com/random/web/jsdemo1/tab.html

3.左右切换

类定义：

Class SwitchPhoto
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();
}

完整代码：

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="data:images/1.jpg" /></li>
                <li><div>2</div><img src="data:images/2.jpg" /></li>
                <li><div>3</div><img src="data:images/3.jpg" /></li>
                <li><div>4</div><img src="data:images/4.jpg" /></li>
                <li><div>5</div><img src="data:images/5.jpg" /></li>
            </ul>
        </div>
    </body>
</html>

演示：

http://www.net320.com/random/web/jsdemo1/switchphoto.html

转载于:https://www.cnblogs.com/Random/archive/2008/11/17/1335094.html

三个Javascript内容切换效果类相关推荐

  1. 网页导航的点击及内容切换效果

    效果如下: 点击导航后导航内容发生改变(内容简略) 点击导航后内容改变的思想: 导航是由 li 标签构成的,给每个 li 标签用循环加一个自定义属性,属性值为索引号 0-3 .一共四个导航块的内容分别 ...

  2. 用CSS3实现图片切换效果

    当几个页面的整体布局相同,只有某个部分在各页面不同时,可以将整体布局的CSS样式写在同一个.css文件中.本次的CSS实现图片s是每个页面下的图片切换效果不同,除此之外,其他的效果都一样.因此,我们可 ...

  3. Flexslider图片轮播、文字图片相结合滑动切换效果

    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...

  4. javascript tab切换类LixTabs最新版

    javascript Tab切换类LixTabs,更新至0.5版: 受snandy的"读jquery"系列的启发,改进了代码,现在调用LixTabs时不用加new了.即可以这样写: ...

  5. ajax 切换列表,javascript实现列表切换效果

    IE兼容性没处理,确切的说不太会,还望指点一二 思路: 1.js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i]. ...

  6. Tab选项卡切换效果JavaScript汇总

    tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...

  7. html叠加层,JavaScript实现多个重叠层点击切换效果的方法

    本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtm ...

  8. js第三章简答题5(制作如图所示的Tab切换效果)

    ps:代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...

  9. vue2.0 实现tab标签切换效果 内容可以自行定义

    利用vue2.0 实现tab标签切换效果 比较实用 初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以. ...

最新文章

  1. 福斯i6飞行模式设置_数据网络卡的时候，不妨试试“开关飞行模式”？上网速度明显变快...
  2. 信息学奥赛一本通 1220：单词接龙 | 1913：【00NOIP普及组】单词接龙 | OpenJudge NOI 2.5 8783 | 洛谷 P1019 [NOIP2000 提高组] 单词接龙
  3. ibatis和hibernate
  4. 麦克风失灵_iPhone7Plus手机麦克风失灵怎么办？请看解决方案
  5. 计算机考试可以带首饰吗,高考时不许考生戴框架眼镜？“无声考场”有新规，考生别忽视...
  6. Django重新整理3
  7. mysql加begin报错,MySQL存储过程例子,不能在if else里面用begin end否则会报错Error Code:1064解决...
  8. java套接字通信_Java网络通信套接字 | 学步园
  9. java递归算法的实例最细讲解
  10. 计算机编程与数控宏程序实例教程,数控车床编程教程，图文实例详解
  11. 国外除了Google还有什么搜索引擎?
  12. Au入门系列之五：轨道与轨道控制​
  13. Java 微信企业付款到零钱
  14. 工资待遇情况的分析研究
  15. EN 50332手机Type-C数字音频输出测试
  16. 06-课堂笔记-包相关
  17. C#支付宝支付接口H5版（手机网页支付）
  18. 常见思维模型汇总（一）
  19. jmeter入门——第一个jmeter脚本
  20. 用java开发android应用（一）

热门文章

  1. CCS初学调试以及RTDX
  2. Setup 和Hold （建立时间和保持时间）解析
  3. TimeQuest约束外设之诡异的Create Generated Clocks用法
  4. 静态时序分析的约束命令
  5. break, continue, goto, return语句详解
  6. 场效应管的判别、检测及使用时的注意事项！
  7. 解决Office 2010出现the setup controller has encountered a problem...
  8. 如何自动设计多流网络 实现GPT3大规模神经网路同等规模的网络
  9. 从“冰柜”到“冰棍儿”,下载Github单个文件
  10. 【加密解密】单表加密(Javascript实现)