无缝轮播图2

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden}

        .imgbox img{width: 1000px;height:300px;position: absolute;left:1000px;top:0;}
        .imgbox img:nth-child(1){left:0;}

        .btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);}
        #left{left:0}
        #right{right:0}
    </style>
</head>
<body>
<div class="banner">
    <div class="imgbox">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
    </div>
    <div class="btns">
        <input type="button" id="left" value="<<<">
        <input type="button" id="right" value=">>>">
    </div>
</div>
</body>
<script src="../move.js"></script>
<script>
    function Banner(){
        this.left = document.getElementById("left")
        this.right = document.getElementById("right")
        this.imgbox = document.querySelector(".imgbox")
        this.img = this.imgbox.children;
        this.index = 0;
        // W1.设置要走的索引
        this.iPrev = this.img.length - 1;

        this.init()
    }
    Banner.prototype.init = function(){
        var that = this;
        // this.left.onclick = function(){}
        this.right.onclick = function(){
            that.changeIndex()
        }
        this.left.onclick = function(){
            that.changeIndex1()
        }
    }
    Banner.prototype.changeIndex = function(){
        if(this.index == this.img.length-1){
            this.index = 0;
            // W2.当要进来的是第0张时，走的是最后一张
            this.iPrev = this.img.length-1
        }else{
            this.index++;
            // W3.正常情况下，走的都是进来的上一张，上一张为当前-1
            this.iPrev = this.index-1;
        }
        this.display();
    }
    Banner.prototype.changeIndex1= function(){
        if(this.index == 0){
            this.index = this.img.length-1;
            // W2.当要进来的是最后用一张，走的是第一张
            this.iPrev = 0;
        }else{
            this.index--;
            // W3.正常情况下，走的都是进来的下一张，下一张为当前-1
            this.iPrev = this.index+1;
        }
        this.display1();
    };
    Banner.prototype.display = function(){
        // W4.根据要走的和要进来的索引
        // 先设置初始位置，然后再开始走(move)

        // 要走的：this.img[this.iPrev]
        this.img[this.iPrev].style.left = 0;
        move(this.img[this.iPrev],{left:-this.img[0].offsetWidth})

        // 要进来的：this.img[this.index]
        this.img[this.index].style.left = this.img[0].offsetWidth + "px";
        move(this.img[this.index],{left:0})

    }
    Banner.prototype.display1 = function(){
        // W4.根据要走的和要进来的索引
        // 先设置初始位置，然后再开始走(move)

        // 要走的：this.img[this.iPrev]
        this.img[this.iPrev].style.left = 0;
        move(this.img[this.iPrev],{left:this.img[0].offsetWidth})

        // 要进来的：this.img[this.index]
        this.img[this.index].style.left = -this.img[0].offsetWidth + "px";
        move(this.img[this.index],{left:0})

    }
   
    function move(ele,json,callback){
        clearInterval(ele.t);
        ele.t = setInterval(() => {
            var onoff = true;
        for(var i in json){
            var iNow = parseInt(getStyle(ele,i));
            var speed = (json[i] - iNow)/6;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
            if(iNow != json[i]){
                onoff = false;
            }
            ele.style[i] = iNow + speed + "px";
        }
        if(onoff){
            clearInterval(ele.t);
            callback && callback();
        }
    }, 30);
    }
    function getStyle(ele,attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele,false)[attr];
        }
    }
    new Banner();
</script>
</html>
复制代码

简易版：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;}
        
        .imgbox img{width: 1000px;height:300px;position: absolute;left:1000px;top:0;}
        .imgbox img:nth-child(1){left:0;}

        .btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);}
        #left{left:0}
        #right{right:0}
    </style>
</head>
<body>
    <div class="banner">
        <div class="imgbox">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>
    function Banner(){
        this.left = document.getElementById("left")
        this.right = document.getElementById("right")
        this.imgbox = document.querySelector(".imgbox")
        this.img = this.imgbox.children;

        this.index = 0;
        // W1.设置要走的索引
        this.iPrev = this.img.length - 1;

        this.init()
    }
    Banner.prototype.init = function(){
        var that = this;
        this.left.onclick = function(){
            that.changeIndex(-1)
        }
        this.right.onclick = function(){
            that.changeIndex(1)
        }
    }
    Banner.prototype.changeIndex = function(type){
        if(type == -1){
            if(this.index == 0){
                this.index = this.img.length-1;
                this.iPrev = 0;
            }else{
                this.index--;
                this.iPrev = this.index+1;
            }
        }else{
            if(this.index == this.img.length-1){
                this.index = 0;
                // W2.当要进来的是第0张时，走的是最后一张
                this.iPrev = this.img.length-1
            }else{
                this.index++;
                // W3.正常情况下，走的都是进来的上一张，上一张为当前-1
                this.iPrev = this.index-1;
            }
        }
        this.display(type);
    }
    Banner.prototype.display = function(type){
        // W4.根据要走的和要进来的索引
        // 先设置初始位置，然后再开始走(move)
        // 要走的：this.img[this.iPrev]
        this.img[this.iPrev].style.left = 0;
        move(this.img[this.iPrev],{left:-this.img[0].offsetWidth * type})
        // 要进来的：this.img[this.index]
        this.img[this.index].style.left = this.img[0].offsetWidth * type + "px";
        move(this.img[this.index],{left:0})
    }

    new Banner();
</script>
</html>
复制代码

 

posted @   菜鸟小何  阅读(132)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示