原声JS面向对象实现的简单轮播

最新推荐文章于 2025-07-23 01:30:00 发布

weixin_34081595

最新推荐文章于 2025-07-23 01:30:00 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/bghead/blog/846715

本文介绍了一个不依赖数组和appendChild方法的轮播图实现方案，仅通过操作元素的left属性完成轮播效果，并提供了完整的HTML和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

给自己定下了一周上传一篇总结博客的计划，实行起来却是坎坷的。这一周还有不到两个小时就过去了，只得拿之前的一则轮播凑个数。代码中的参数尚不提取完善，来日跟新版本再进行封装。（ps:本段代码是不利用array和appendchild的，仅操作left属性实现的简单轮播）。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>没有切换数组的简单轮播</title>
    <style>
        ul,li{
            padding:0;
            margin:0;
        }
        li{list-style: none;}
        .LBstage{
            width:200px;
            height:150px;
            margin:0 auto;
            margin-top:300px;
            border:1px solid #aaa;
            overflow:hidden;
            position: relative;
        }
        .LBcontent{
            width:800px;
            height:150px;
            overflow: hidden;
            position: absolute;
            top:0;
            left:0;
        }
        .LBcontent>li{
            float:left;
        }
        .LBdump{
            margin:0 auto;
            margin-top:15px;
            width:140px;
            height:30px;
            overflow: hidden;
        }
        .LBdump>li{
            width:30px;
            height:30px;
            text-align: center;
            line-height:30px;
            margin-right:5px;
            border-radius:30px;
            background: #aaa;
            float:left;
            cursor:default;
        }
        .LBdump>li.chose{
            background: #ff0000;
            color:#fff;
        }
    </style>
</head>
<body>
<div class="LBstage">
    <ul class="LBcontent" style="left:0;">
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
    </ul>
</div>
<ul class="LBdump">
    <li class="chose">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<button onclick="promo.stop()">暂停</button>
<button onclick="promo.goon()">继续</button>
<script>
    var promo={
           /*定义参数*/
        WIDTH:200,  //图片的宽度
        length:4,  //图片最大幅数
        step:100, //每两幅图切换的步数
        ul:document.getElementsByClassName('LBcontent')[0],  //页面ul
        dump:document.getElementsByClassName('LBdump')[0],   //下标的ul
            /*功能参数*/
        timer:null,  //定时器
        index:0,  //当前图片index
        init:function(){
            this.timer=setInterval(this.changeView.bind(this),3000);
            this.listener(this);  //传入promo对象,在lintener中的监听函数中使用
        },
        listener:function(t){   //绑定li上的监听事件
            for(var k in this.dump.childNodes){
                if(this.dump.childNodes[k].nodeName=='LI'){
                    this.dump.childNodes[k].addEventListener('mouseover',function(){
                        t.stop();  //先清除定时器，手动移动完成后再goon
                        t.index=parseInt(this.innerHTML)-1; //将当前手动改变的index赋值给全局
                        t.onestep(t.index); //调用promo的onestep方法
                        t.goon();
                    });
                }
            }
        },
        changeView:function(){
            if(this.index==this.length-1){
                this.index=0;
            }else{
                this.index++;
            }
            this.onestep(this.index);
        },
        onestep:function(cur){
            //下标颜色变换
            this.dump.childNodes.forEach(function(i){
                if(i.nodeName=='LI'){
                    if(i.innerHTML==cur+1){
                        i.className='chose';
                    }else{
                        i.className='';
                    }
                }
            });
            //图片变换
            var nowLeft=parseFloat(this.ul.style.left); //读取现在的left
            var toLeft=-cur*this.WIDTH;  //读取目标left
            var chaPX=(toLeft-nowLeft)/this.step;   //一次移动的步长
            var step=1;
            var stepTimer=setInterval(function(){
                if(step<=this.step){
                    this.ul.style.left=nowLeft+chaPX*step+'px';
                    step++;
                }else{
                    clearInterval(stepTimer);
                    stepTimer=null;
                }
            }.bind(this),2);
        },
        stop:function(){
            clearInterval(this.timer);
            this.timer=null;
        },
        goon:function(){  //停止之后才能点击继续
            this.timer===null&&(this.timer=setInterval(this.changeView.bind(this),2500));
        }
    };
    promo.init();
    //网页缩小或切换等操作时停止动画；
    window.onblur = function(){promo.stop();};
    window.onfocus = function(){promo.goon();};
</script>
</body>
</html>

转载于:https://my.oschina.net/bghead/blog/846715