• JS轮播图自动播放和点击联动功能


    JS轮播图自动播放和点击联动功能!

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box{ 1130px;height: 300px;margin: 20px auto;position: relative;
                overflow: hidden;
            }
            .imgbox{height: 300px;position: absolute;left:0;}
            .imgbox a{float: left;}
            .imgbox img{ 1130px;height: 300px;}
    
        </style>
    </head>
    <body>
        <div class="box">
            <div class="imgbox">
                <a><img src="https://img.zcool.cn/community/013c185ec5e1a0a801214d72ae5567.jpg"></a>
                <a><img src="https://img.zcool.cn/community/019b5a5ec5ea6ba801209b864afbad.png" alt=""></a>
                <a><img src="https://img.zcool.cn/community/0155475ec5ea82a801209b86526dc0.png" alt=""></a>
                <a><img src="https://img.zcool.cn/community/0133395ec5ea9fa801209b86533992.png" alt=""></a>
                <a><img src="https://img.zcool.cn/community/013c185ec5e1a0a801214d72ae5567.jpg"></a>
            </div>
        </div>
    </body>
    <script src="../day24/move.js"></script>
    <script>
        // 可自定义的轮播图
        class Banner{
            constructor(ops){
                // 处理参数
                this.imgbox = ops.imgbox;
                this.list = ops.list!==false ? true : false;
                this.btn = ops.btn!==false ? true : false;
                this.autoPlay = ops.autoPlay!==false ? true : false;
                // 默认索引
                this.index = 0;
                // 获取所有图片
                this.items = this.imgbox.children;
    
                // 功能1. 初始化布局:完善imgbox的宽度
                this.init();
                // 功能B. 根据参数决定是否创建按键
                this.isBtn();
                // 功能L. 根据参数决定是否创建list
                this.isList();
                // 功能A. 根据参数决定是否需要自动播放
                this.isAutoPlay();
            }
            init(){
                this.imgbox.style.width = this.items.length * this.items[0].offsetWidth + "px";
            }
            isAutoPlay(){
                // A1.如果是false,终止当前函数,不执行后面代码,不做这个功能
                if(!this.autoPlay) return;
                // 如果执行到此处,说明上面过来的是true,没有执行return
    
                // A2.立即开启计时器,执行点击右按钮要做的事情
                this.t = setInterval(() => {
                    // 右按钮被点击时要执行的函数
                    this.changeIndex(-1);
                }, 2000);
    
                var that = this;
                // A3.鼠标进入停止
                this.imgbox.parentNode.onmouseover = function(){
                    clearInterval(that.t);
                }
                // A4.鼠标离开继续
                this.imgbox.parentNode.onmouseout = function(){
                    that.t = setInterval(() => {
                        that.changeIndex(-1);
                    }, 2000);
                }
            }
            isList(){
                // L1.如果是false,终止当前函数,不执行后面代码,不做这个功能
                if(!this.list) return;
                // 如果执行到此处,说明上面过来的是true,没有执行return
    
                // L2.为了实现无缝轮播,将第一张图复制了一遍多了一张,记得去掉
                var num = this.items.length-1;
                // 假设的图片的名字,将来必然是数据
                var arr = ["体彩","彩墨画","洗剪吹","网页设计"];
                // L3.创建list的容器
                this.list = document.createElement("div");
                this.list.style.cssText = `position: absolute; 100%;height: 40px;line-height: 40px;display: flex;bottom: 0;left:0;text-align: center;`;
                // L4.根据图片的数量,创建对应个span
                var str = "";
                for(var i=0;i<num;i++){
                    str += `<span key=${i} style="flex: 1;margin: 0 1px;background: rgba(200,200,200,0.6)">${arr[i]}</span>`;
                }
                // L5.将span放在list容器中
                this.list.innerHTML = str;
                // 设置索引对应span的当前项
                this.list.children[this.index].style.background = "green";
                // L6.将list容器插入页面
                this.imgbox.parentNode.appendChild(this.list);
    
                // L7.绑定list中span的事件
                this.listAddEvent();
            }
            listAddEvent(){
                var that = this;
                var aspan = this.list.children;
                for(var i=0;i<aspan.length;i++){
                    aspan[i].onclick = function(){
                        // L8.获取span身上的索引:保证索引的数据是数值,防止将来出现问题
                        that.index = parseInt(this.getAttribute("key"));
                        // L9.执行move,显示对应图片
                        that.move();
                        // L11.修改当前背景色
                        that.setActive()
                    }
                }
            }
            setActive(){
                // 取消所有
                for(var i=0;i<this.list.children.length;i++){
                    this.list.children[i].style.background = "rgba(200,200,200,0.6)";
                }
                // 为了处理最后一张图(其实就是复制的第一张图)的索引,单独判断,保存变量
                // 计算索引
                var k = this.index===this.items.length-1 ? 0 : this.index;
                // 设置当前索引对应的span的背景色
                this.list.children[k].style.background = "green";
            }
            isBtn(){
                // B1.如果是false,终止当前函数,不执行后面代码,不做这个功能
                if(!this.btn) return;
                // 如果执行到此处,说明上面过来的是true,没有执行return
    
                // B2.创建并插入左按钮
                this.left = document.createElement("input");
                this.left.style.cssText = ` 40px;height: 40px;background: rgba(200,200,200,0.6);border:none;position: absolute;top:130px;left:0`;
                this.left.value = "<"
                this.imgbox.parentNode.appendChild(this.left);
                
                // 创建并插入右按钮
                this.right = document.createElement("input");
                this.right.style.cssText = ` 40px;height: 40px;background: rgba(200,200,200,0.6);border:none;position: absolute;top:130px;right:0`;
                this.right.value = ">";
                this.imgbox.parentNode.appendChild(this.right);
    
                this.left.type = this.right.type = "button";
    
                // B3.绑定左右按钮的点击事件
                this.btnAddEvent();
            }
            btnAddEvent(){
                var that = this;
                this.left.onclick = function(){
                    // B4-1.改变索引
                    that.changeIndex(1)
                }
                this.right.onclick = function(){
                    // B4-2.改变索引
                    that.changeIndex(-1);
                }
            }
            changeIndex(d){
                if(d===1){
                    if(this.index===0){
                        this.index = this.items.length-2;
                        this.imgbox.style.left = -(this.items.length-1) * this.items[0].offsetWidth + "px";
                    }else{
                        this.index--;
                    }
                }else{
                    if(this.index===this.items.length-1){
                        this.index = 1;
                        this.imgbox.style.left = 0;
                    }else{
                        this.index++;
                    }
                }
                // B5.移动大框,切换图片
                this.move();
                // L12.点击按钮时,设置索引对应的list的span的背景色
                // 设置之前先判断,list出否存在,不存在,不设置样式
                this.list && this.setActive();
            }
            move(){
                // B6.显示图片
                // L10.显示图片
                // 神器:console.log
                // console.log(this.index);
                move(this.imgbox, {left: -this.index*this.items[0].offsetWidth});
            }
        }
    
        // 准备执行方式
        new Banner({
            imgbox:document.querySelector(".box .imgbox"),  // 必传
            list:true,         // 可选,默认为true
            btn:true,          // 可选,默认为true
            autoPlay:true     // 可选,默认为true
        })
    </script>
    </html>

    move.js

    function move(ele, data, cb){
            clearInterval(ele.t);
            ele.t = setInterval(() => {
                var onoff = true;
    
                for(var i in data){
                    var iNow = parseInt(getStyle(ele,i));
        
                    var speed = (data[i] - iNow)/8;
                    speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
    
                    ele.style[i] = iNow + speed + "px";
    
                    if(iNow != data[i]){
                        onoff = false;
                    }
                }
                if(onoff){
                    clearInterval(ele.t);
                    // 结束的位置要做什么,交给使用者决定
                    // 传个功能进来,传函数
                    cb && cb();
                }
            }, 30);
        }
    
        // 动画结束后,再执行其他效果
    
        // 获取样式的兼容处理
        function getStyle(ele,attr){
            if(ele.currentStyle){
                return ele.currentStyle[attr];
            }else{
                return getComputedStyle(ele, false)[attr];
            }
        }
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    [C]%p和%02x含义
    [python]特殊输入格式(输入中包含空格逗号等)
    《python编程从入门到实践》用户输入和while循环
    [ C ]根据年月日判断周几(基姆拉尔森计算公式)
    《python编程从入门到实践》字典
    《python编程从入门到实践》if语句
    记一次页面乱码问题的解决
    apache配置健康检查
    nginx 配置代理对象的host
    nginx配置http负载均衡
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617756.html
Copyright © 2020-2023  润新知