原生js京东轮播图

最新推荐文章于 2023-04-06 01:30:17 发布

ly521xp

最新推荐文章于 2023-04-06 01:30:17 发布

阅读量307

点赞数

本文链接：https://blog.csdn.net/ly521xp/article/details/94554615

版权

## css
<style>
    .item li {
        list-style: none;
        width: 590px;
        height: 340px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;

    }

    img {
        width: 100%;
        height: 100%;
    }

    .leftBtn {
        position: absolute;
        left: 0;
        top: 0;
    }

    .rightBtn {
        position: absolute;
        right: 0;
        top: 0;
    }

    div {
        position: relative;
        width: 590px;
        height: 340px;
    }

    .page {
        position: absolute;
        bottom: 50px;
        left: 200px;
        height: 30px;
        /*width: 300px;*/
    }

    .page li {
        float: left;
        width: 30px;
        height: 30px;
        list-style: none;
        background: red;
        border-radius: 50%;
        line-height: 30px;
        text-align: center;

    }
</style>

## HTML

<body>
    <script src="animateBak.js"></script>
    <script src="jdlb.js"></script>
    <div class="box">
        <ul class="item">
            <li style="opacity: 1">[外链图片转存失败(img-Y8YOI07E-1562124890184)(https://mp.csdn.net/mdeditor/img/1.jpg)]</li>
            <li style="opacity: 0">[外链图片转存失败(img-MSPss6mF-1562124890185)(https://mp.csdn.net/mdeditor/img/2.jpg)]</li>
            <li>[外链图片转存失败(img-18BPLyJA-1562124890185)(https://mp.csdn.net/mdeditor/img/3.jpg)]</li>
            <li>[外链图片转存失败(img-5kkwaLTr-1562124890186)(https://mp.csdn.net/mdeditor/img/4.jpg)]</li>
            <li>[外链图片转存失败(img-j6TPXqW8-1562124890186)(https://mp.csdn.net/mdeditor/img/5.jpg)]</li>
        </ul>
        <button class="leftBtn">&lt;</button>
        <button class="rightBtn">&gt;</button>

        <ul class="page">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

    </div>
    <script>
        new LunBo('.box')
    </script>

</body>

## animateBak.js
/**
 * Created by jameswatt2008 on 2017/6/5.
 */

function animate(div, obj) {
    //console.log(cb)

    //{left:100;top:200}
    //{left:100}
    //{left:100}
    clearInterval(div.timer);

    div.timer = setInterval(function () {
        var flag = true;//假设已经到了目的地
        //1-0.5
        //100  50
        for (var key in obj) {
            // console.log(key)//left   top   getStyle['left']
            // console.log(obj[key])//300
            var target = obj[key];
            if (key == 'opacity') {
                var speed = (target - parseFloat(getStyle(div)[key])) * 100 / 8;
                // console.log(speed,'speed1')
                speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
                //console.log(speed,'speed2')

                var op = parseFloat(getStyle(div)[key]) + speed / 100;
                // console.log(op)

                div.style[key] = op;
                if (parseFloat(getStyle(div)[key]) != target) {
                    flag = false;
                }

            } else {
                var speed = (target - parseInt(getStyle(div)[key])) / 8;
                speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
                div.style[key] = parseInt(getStyle(div)[key]) + speed + 'px';
                if (parseInt(getStyle(div)[key]) != target) {
                    flag = false;
                }
            }
        }

        //必须等到所有的 属性都到达目的地 才能结束定时器
        if (flag == true) {
            clearInterval(div.timer);



        }

    }, 30);

}

function getStyle(ele) {
    if (ele.currentStyle) {
        return ele.currentStyle;
    } else {
        return getComputedStyle(ele, null);
    }
}

## jdlb.js

class LunBo {
    constructor(sel) {
        this.sel = sel//变成属性
        this.el = document.querySelector(this.sel)//定义el最外层盒子元素

        this.rightBtn = this.el.querySelector('.rightBtn')//右按钮
        this.leftBtn = this.el.querySelector('.leftBtn')//左按钮

        this.pointLis = this.el.querySelectorAll('.page li')//获取小圆点
        this.pageLis = this.el.querySelectorAll('.item li')//获取图片

        this.pageNum = 0;//记录当前显示哪一张
        this.showPoint()
        //给右键增加事件
        this.btnsEvent()//按钮点击事件
        this.atuoPlay()//自动播放
        this.pointEvent()//小圆点点击事件
    }
    //小圆点的点击事件
    pointEvent() {
        let that = this
        for (let i = 0; i < this.pointLis.length; i++) {
            this.pointLis[i].onclick = () => {
                animate(this.pageLis[this.pageNum], { opacity: 0 })

                this.pageNum = i;
                animate(this.pageLis[this.pageNum], { opacity: 1 })


                this.showPoint()
            }
        }
    }
    //小圆点显示
    showPoint() {
        for (let i = 0; i < this.pointLis.length; i++) {
            this.pointLis[i].style.backgroundColor = 'red'
        }
        this.pointLis[this.pageNum].style.backgroundColor = 'white'
    }
    //封装右按钮点击事件
    next() {
        let that = this
        //that.pageLis[that.pageNum].style.opacity = 0
        animate(that.pageLis[that.pageNum], { opacity: 0 })
        //点击时播放下一张图片
        that.pageNum++;
        //当图片到最后一张时，让他下一张回到第一张
        if (that.pageNum == 5) {
            that.pageNum = 0;
        }
        //that.pageLis[that.pageNum].style.opacity = 1
        animate(that.pageLis[that.pageNum], { opacity: 1 })
        //根据页码 显示对应的小圆点
        that.showPoint()
    }
    //给按钮加事件
    btnsEvent() {
        let that = this
        //右键
        this.rightBtn.onclick = function () {
            that.next()
        }
        //左键
        this.leftBtn.onclick = function () {
            //that.pageLis[that.pageNum].style.opacity = 0
            animate(that.pageLis[that.pageNum], { opacity: 0 })
            //点击时播放下一张图片
            that.pageNum--;
            //当图片到最后一张时，让他下一张回到第一张
            if (that.pageNum == -1) {
                that.pageNum = 4;
            }
            //that.pageLis[that.pageNum].style.opacity = 1
            animate(that.pageLis[that.pageNum], { opacity: 1 })
            that.showPoint()
        }
    }
    //自动播放
    atuoPlay() {
        this.timer = setInterval(() => {
            this.next()
        }, 3000)
        //定时器
        this.el.onmouseenter = () => {
            clearInterval(this.timer)
        }
        this.el.onmouseleave = () => {
            this.timer = setInterval(() => {
                this.next()
            }, 3000)
        }
    }
}

ly521xp

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js京东轮播图

HTML``` [外链图片转存失败(img-oy3yXIsq-1562124730208)(https://mp.csdn.net/mdeditor/img/1.jpg)] [外链图片转存失败(img-BDA0SeYy-1562124730208)(https://mp.csdn.net/mdeditor/im...
复制链接

扫一扫