原型封装轮播图

最新推荐文章于 2024-01-16 10:43:08 发布
最新推荐文章于 2024-01-16 10:43:08 发布
阅读量218 收藏
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyhyouGOD/article/details/111676438
版权

只要用dom元素调用这个方法，传一个数组进去，里面放的是图片的路径。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }

        .leftBtn {
            position: absolute;
            width: 30px;
            height: 30px;
            color: black;
            background-color: cyan;
            top: 50%;
            margin-top: -15px;
            line-height: 30px;
            text-align: center;
            opacity: 0.6;
            cursor: pointer;
            left: 10px;
        }

        .rightBtn {
            position: absolute;
            width: 30px;
            height: 30px;
            color: black;
            background-color: cyan;
            top: 50%;
            margin-top: -15px;
            line-height: 30px;
            text-align: center;
            opacity: 0.6;
            cursor: pointer;
            right: 10px;
        }

        .slider {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            cursor: pointer;
        }

        .slider span {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: darkgray;
            border-radius: 50%;
            margin-left: 10px;
        }

        .slider .active {
            background-color: #f40;
        }
    </style>
</head>

<body>
    <div class="div"></div>
    <div id="div"></div>
    <script>

        var div = document.getElementsByClassName('div')[0]
        var oDiv = document.getElementById('div')
        // var arr = ['./tp copy/decade.jpg', './tp copy/decad.jpg', './tp copy/tp.jpg']
        HTMLDivElement.prototype.createTurnPage = function (arr) {
            var arr = (typeof arr != "object") ? [arr] : arr; //确保参数总是数组
            var ul = document.createElement('ul');
            ul.className = 'ul'
            this.style.width = '400px';
            this.style.height = 200 + 'px';
            this.style.position = 'relative';
            this.style.overflow = 'hidden'
            this.style.margin = '200px auto 0px';
            this.appendChild(ul);
            ul.style.width = (1 + arr.length) * parseInt(this.style.width) + 'px'
            ul.style.height = this.style.height
            ul.style.position = 'absolute'
            for (let i = 0; i < arr.length + 1; i++) {
                var li = document.createElement('li');
                var img = document.createElement('img');
                ul.appendChild(li);
                li.appendChild(img);
                li.style.width = this.style.width
                li.style.height = this.style.height
                li.style.float = 'left'
                img.style.width = '100%'
                img.style.height = '100%'
                img.src = arr[i];
            }
            var LastImg = document.createElement('img');
            var liList = document.getElementsByClassName('ul')[0].getElementsByTagName('li');
            LastImg.src = arr[0];
            LastImg.style.width = '100%'
            LastImg.style.height = '100%'
            liList[liList.length - 1].removeChild(img)
            liList[liList.length - 1].appendChild(LastImg);

            var leftBtn = document.createElement('div');
            var rightBtn = document.createElement('div');
            var slider = document.createElement('div');
            for (let i = 0; i < arr.length; i++) {
                var span = document.createElement('span')
                slider.appendChild(span)
            }
            var arrSpan = slider.getElementsByTagName('span')
            this.appendChild(leftBtn)
            this.appendChild(rightBtn)
            this.appendChild(slider)
            slider.className = 'slider'
            leftBtn.className = 'leftBtn';
            leftBtn.innerHTML = '&lt;'
            rightBtn.className = 'rightBtn';
            rightBtn.innerHTML = '&gt;'

            var timer = null;
            var lock = true
            var index = 0;
            var moveWidth = document.getElementsByTagName('li')[0].offsetWidth;
            var num = document.getElementsByTagName('li').length - 1;


            leftBtn.onclick = function () {
                autoMove('right->left')
            }
            rightBtn.onclick = function () {
                autoMove('left->right')
            }
            for (var i = 0; i < arrSpan.length; i++) {
                (function (myindex) {
                    arrSpan[myindex].onclick = function () {
                        lock = false;
                        clearTimeout(timer)
                        index = myindex
                        startMove(ul, { left: -index * moveWidth }, function () {
                            lock = true;
                            timer = setTimeout(autoMove, 2000)
                            spanMove(index)
                        })

                    }
                }(i))
            }
            function autoMove(direction) {
                if (lock) {
                    lock = false
                    clearTimeout(timer);
                    if (!direction || direction == 'left->right') {
                        index++;
                        startMove(ul, { left: ul.offsetLeft - moveWidth }, function () {
                            if (ul.offsetLeft == - num * moveWidth) {
                                ul.style.left = 0 + 'px'
                                index = 0
                            }
                            spanMove(index);
                            timer = setTimeout(autoMove, 2000)
                            lock = true
                        })
                    } else if (direction == 'right->left') {
                        if (ul.offsetLeft == 0) {
                            ul.style.left = - num * moveWidth + 'px'
                            index = num
                        }
                        index--;
                        startMove(ul, { left: ul.offsetLeft + moveWidth }, function () {
                            timer = setTimeout(autoMove, 2000)
                            lock = true
                            spanMove(index)
                        })

                    }
                }

            }
            function spanMove(index) {
                for (var i = 0; i < arrSpan.length; i++) {
                    arrSpan[i].className = ''
                }
                arrSpan[index].className = 'active'
            }
            timer = setTimeout(autoMove, 1500)
        }

        // div.createTurnPage(arr)
        oDiv.createTurnPage(['./tp copy/decade.jpg', './tp copy/logo.jpg', './tp copy/decad.jpg', './tp copy/tp.jpg'])


        function getStyle(dom, attr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(dom, null)[attr];
            } else {
                dom.currentScript[attr];
            }
        }



        function startMove(dom, attrObj, callback) {
            clearInterval(dom.timer);
            var speed = null,
                cur = null;

            dom.timer = setInterval(function () {
                var stop = true;
                for (var attr in attrObj) {
                    if (attr == "opacity") {
                        cur = parseFloat(getStyle(dom, attr)) * 100;
                    } else {
                        cur = parseInt(getStyle(dom, attr));
                    }
                    speed = (attrObj[attr] - cur) / 7;
                    speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
                    if (attr == "opacity") {
                        dom.style.opacity = (speed + cur) / 100;
                    } else {
                        dom.style[attr] = speed + cur + "px";
                    }
                    if (cur != attrObj[attr]) {
                        stop = false;
                    }
                }
                if (stop) {
                    clearInterval(dom.timer);
                    typeof callback == "function" && callback();
                }
            }, 20);
        }

    </script>
</body>

</html>
zyhyoustrive
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【VUE】微商城（四）----封装轮播图组件,axios安装使用
Robin的博客
04-06 2511
1、在components文件夹下新建SwiperView.vue文件，并添加基本结构 如图所示： 2、打开mint-ui文档 找到轮播图组件mint-ui documentation并且复制轮播图基础用法 <mt-swipe :auto="4000"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item&g..
基于ES6类封装一个轮播图(可以选择上传图片，但只能上传一次)
qq_42863433的博客
07-12 392
Class类的介绍 类作为ES6才有的概念 类的数据类型是函数，类本身就是构造函数 每一个类都有constructor方法，而constructor方法在类进行实例化的时候会自调用，默认返回实例化对象，在这里定义的方法都是定义在实例对象上， 在类内部定义方法不需要function关键字，不然会报错，直接写函数就行了，并且定义是定义在原型对象上 class Student { constructor(x, y) { this.x = x; this.y = y; // 定义在实例原型对象 /*
原型轮播。
weixin_57762540的博客
06-16 152
7 轮播 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Axure RP 8 作者：卢琳辉 撰写时间：2021/6/15 注意看红色箭头，共有20个步骤，按顺序操作下去 1、在元件库拉出图片，换上自己喜欢的图片。 2、右键点击图片，转换为动态面板。 3、转换为动态面板以后，双击图片会出现一个面板，点击复制，...
轮播图方法，原型链上编程？？
Yzhoun的博客
07-06 313
自动生成轮播图 相当于在数组的对象里面增加一个地址就会多一张图片（我是小白，写的差请多多包涵，运用了之前的一些框架然后组成了一个自动的框架） html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
Axure原型：移动端图片轮播集合
mushe93的博客
07-22 282
原型预览：https://www.pmdaniu.com/storage/121050/6f1cd5148df7c367957aa9b6f35bef6b-69620/start.html 原型介绍 作品页数：共6页，分别为顶部图片轮播图、顶部大小轮播图、上下滑动轮播图、全屏轮播图、心形轮播图、大小图轮播图（横屏） 应用领域：移动端图片轮播、广告轮播、商品展示等 作品特色：使用简单、复用性强，图片轮播组件由中继器制作而成（心形图除外），只需要填写表格，导入图片即可使用，交互已经设置好了。 使用版本：
js 无缝轮播/原型方法封装
weixin_42448623的博客
09-20 118
在这里插入代码片
axure-轮播图原型
12-08
axure8.0版本，自动滚动、点击切换等效果，供大家交流使用，不可用于商业，本人原创，内部图片为网上下载学习使用。 原型预览地址：https://yaj65d.axshare.com/#c=2
jq封装轮播图封装轮播图
06-22
在jQuery封装轮播图时，我们通常会创建一个名为`Carousel`的构造函数，用于初始化轮播图的设置，如容器元素、图片列表、切换速度等。接着，我们会定义该类的原型（`prototype`），添加一些方法，如`init`（初始化）...
jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承
10-20
这个函数负责初始化轮播图的各种状态，例如设置第一个图片项为可见，创建轮播指示器，并设置前后按钮的初始状态。该函数还处理了鼠标悬停和点击事件，根据用户的交互动作来控制图片轮播的行为。 在实现方法中，还...
Axure 原型设计 实现轮播图
qq_41919732的博客
07-18 900
1、新建动态面板 300200，命名为 轮播图； 2、双击轮播图组合：新增state2，state3； 3、双击state1，新建一个矩形框，位置 0 0 300200 填充色：红色 文字：图1； 4、重复3 ，设置state2 state3； 下面实现图片轮播： 5、轮播图—页面载入时–设置面板状态—set轮播图–next–向后循环–循环间隔2000毫秒–进入动画...
banner图轮播_产品原型_axure原型实例_实战原型_
05-21
axure轮播图，可帮助需要相关原型迅速建立，注意版本为axure8
Axure交互制作-跑马灯-文字滚动
11-12
Axure交互制作-跑马灯-文字滚动 比较完整的Axure交互讲解说明
墨刀原型-实现轮播图功能
最新发布
niuniu_666的博客
01-16 1176
墨刀原型实现轮播图功能
封装轮播图
weixin_33936401的博客
02-24 348
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
面向对象使用class类原生封装轮播图
wang123mengs的博客
01-25 726
源码： class 类学习使用： 使用class类，封装一个简单的轮播图 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> ...
[原型设计]Axure制作首页轮播图片切换效果
shuytu
11-13 2492
1、新建Axure PR文件，取名“Axure制作首页轮播图片切换效果” 2、获取素材，进入36Kr官网主页，获取轮播图片素材。 获取素材 3、拖拽动态面板控件Dynamic Panel,取名“轮播图片”，设置6个状态分别取名为1、2、3、4、5、6，动态面板大小设置为和图片大小一致747*231px。 设置动态面板 4、双击动态面板1-6
使用面向对象思维制作轮播图（构造函数模式+原型模式）
weixin_43734973的博客
01-21 789
  最近看了一位大佬的博客，讲的是他对面向对象思维的理解，我看了也受益良多，所以活学活用利用面向对象思维制作了一个具有完整功能的轮播图： 功能： 点击图片两侧的黑灰色按钮可以实现页面的前后切换。 点击图片下面的小圆点可以实现指定跳转。 使用定时器，实现图片的自动轮播。 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;hea...
JS-案例-三种轮播图写法（一）
Joker.M的博客
06-03 903
第一种 点击右侧小图，对应大图变换类型 DOM构建元素，样式。 初始状态函数 <script> var imgArr=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg"]; var iconArr=["./img/icon_a.jpeg","./...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值