找回密码
当前位置：前端开发者 > JavaScript > 正文

前端js面向对象版无缝轮播案例

2018-09-04 21:02:32 分类：JavaScript 阅读(127) 评论(0)

web前端项目开发案例 前端在项目中实际开发流程 前端开发项目教学

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>轮播（面向对象版）</title>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .carousel-box {
            position: relative;
            width: 573px;
            height: 257px;
            border: 1px solid #000;
            margin: 100px auto 0;
            overflow: hidden;
        }
        #carousel-main {
            width: 9999px;
            height: 100%;
            position: absolute;
            left: -573px;
        }
        #carousel-main li {
            float: left;
            width: 573px;
            height: 257px;
        }
        #carousel-main li:nth-child(1) {
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201605/12/131656naqg4cssvvts7jdd.jpg) no-repeat center / 100% 100%;
        }
        #carousel-main li:nth-child(2) {
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201605/12/131657yxrvv1kbktxceikc.jpg) no-repeat center / 100% 100%;
        }
        #carousel-main li:nth-child(3) {
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201605/12/131657xt66cprl1z1r2wwk.jpg) no-repeat center / 100% 100%;
        }
        #carousel-main li:nth-child(4) {
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201605/12/131657z055fxuckg0czwj2.jpg) no-repeat center / 100% 100%;
        }
        #carousel-main li:nth-child(5) {
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201605/12/131656naqg4cssvvts7jdd.jpg) no-repeat center / 100% 100%;
        }
        #carousel-main li:nth-child(6) {
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201605/12/131657yxrvv1kbktxceikc.jpg) no-repeat center / 100% 100%;
        }
        #carousel-index {
            width: 108px;
            position: absolute;
            right: 230px;
            bottom: 19px;
            display: flex;
            justify-content: space-around;
        }
        #carousel-index a {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #000;
        }
        #carousel-index .active {
            background: red;
        }
        .left,
        .right {
            position: absolute;
            z-index: 1000;
            top: 40%;
            width: 40px;
            line-height: 50px;
            background: #000;
            opacity: .5;
            text-decoration: none;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
        }
        .right {
            right: 0;
        }
    </style>
</head>
<body>
    <section class=”carousel-box”>
        <ul id=”carousel-main”>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href=”###” class=”left”>Left</a>
        <a href=”###” class=”right”>Right</a>
        <ul id=”carousel-index”>
            <a href=”###” class=”active”></a>
            <a href=”###”></a>
            <a href=”###”></a>
            <a href=”###”></a>
        </ul>
    </section>
    <script type=”text/javascript”>
        function Carousel(obj, indexA) {
            this.init(obj, indexA);
        }
        Carousel.prototype = {
            init: function (obj, indexA) {
                var oThis = this;
                this.obj = obj;
                this.num = 4;
                this.indexA = indexA;
                this.width = 573;
                this.index = 0;
                this.flag = true;
                this.timer = null;
                this.left = this.obj.parentNode.querySelector(‘.left’);
                this.right = this.obj.parentNode.querySelector(‘.right’);
                this.autoTimer = setInterval(function () {
                    oThis.next();
                }, 3000);
                this.obj.parentNode.onmouseover = function () {
                    clearInterval(oThis.autoTimer);
                };
                this.obj.parentNode.onmouseout = function () {
                    oThis.autoTimer = setInterval(function () {
                        oThis.next();
                    }, 3000);
                };
                this.left.onclick = function () {
                    oThis.prev();
                };
                this.right.onclick = function () {
                    oThis.next();
                };
                for (var i = 0; i < this.num; i++) {
                    this.indexA[i].index = i;
                    this.indexA[i].onmouseover = function () {
                        oThis.index = this.index;
                        oThis.move(this.index);
                    }
                }
            },
            prev: function () {
                this.index–;
                if (this.index === -1) {
                    this.index = this.num;
                    this.obj.style.left = (this.index + 1) * (-this.width) + ‘px’;
                    this.index–;
                }
                this.move(this.index);
            },
            next: function () {
                this.index++;
                if (this.index === this.num) {
                    this.index = 0;
                    this.obj.style.left = 0;
                }
                this.move(this.index);
            },
            move: function (index, callBack) {
                var translate = – (index + 1) * this.width;
                var oThis = this;
                clearInterval(oThis.timer);
                for (var i = 0; i < this.num; i++) {
                    this.indexA[i].className = ”;
                }
                index === -1 ? index = this.num – 1 : ”;
                this.indexA[index].className = “active”;
                oThis.timer = setInterval(function () {
                    var iSpeed = (translate – oThis.obj.offsetLeft) / oThis.num;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if (iSpeed === 0) {
                        clearInterval(oThis.timer);
                        callBack && callBack.call(oThis);
                    } else {
                        oThis.obj.style.left = oThis.obj.offsetLeft + iSpeed + ‘px’;
                    }
                }, 25);
            }
        };
        window.onload = function () {
            var obj = document.getElementById(‘carousel-main’);
            var indexA = document.getElementById(‘carousel-index’).getElementsByTagName(‘a’);
            new Carousel(obj, indexA);
        };
    </script>
</body>
</html>

大家都知道 目前来说 不管是pC端的还是移动的无缝轮播通常都是2种思路:
1.就像我这次的前后各多一张图片，初始化显示第2张图片
2.不多图片，初始化显示第二张图片，不过呢 用户看到的永远都是第二个位置。

前端开发项目总结文档 web前端开发项目职责 前端项目开发遇到兼容

» 本文来自：前端开发者 » 《前端js面向对象版无缝轮播案例》
» 本文链接地址：https://www.rokub.com/5464.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论