js轮播图生成器-CSDN博客

本文链接：https://blog.csdn.net/qq1123642601/article/details/88737814
博客主要围绕使用HTML、CSS和JavaScript实现轮播图展开，涉及前端开发相关技术，利用这些技术可创建出具有动态效果的轮播图，为网页增添交互性和视觉效果。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>09轮播图作业</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .wrapper {
            position: relative;
            width: 400px;
            height: 250px;
            margin: 100px auto;
            border: 1px solid #000;
            overflow: hidden;
        }

        .wrapper .sliderPage {
            position: absolute;
            width: 2000px;
            height: 250px;
        }

        .wrapper .sliderPage li {
            float: left;
            width: 400px;
            height: 250px;
        }

        .wrapper .sliderPage li img {
            width: 400px;
            height: 250px;
        }

        .wrapper .btn {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #000;
            color: #fff;
            top: 50%;
            margin-top: -20px;
            opacity: 0.1;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        .wrapper .btn:hover {
            opacity: 1;
        }

        .wrapper .leftBtn {
            left: 15px;
        }

        .wrapper .rightBtn {
            right: 15px;
        }

        .wrapper .sliderIndex {
            position: absolute;
            width: 100%;
            bottom: 10px;
            text-align: center;
        }

        .wrapper .sliderIndex span {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #ccc;
            cursor: pointer;
            border-radius: 50%;
            margin: 5px;
        }

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

<body>
    <div class="wrapper">
        <!-- <ul class="sliderPage">
            <li>
                <img src="imgs/1.jpg" alt="">
            </li>
            <li>
                <img src="imgs/2.jpg" alt="">
            </li>
            <li>
                <img src="imgs/3.jpg" alt="">
            </li>
            <li>
                <img src="imgs/4.jpg" alt="">
            </li>
            <li>
                <img src="imgs/1.jpg" alt="">
            </li>
        </ul>
        <div class="btn leftBtn">&lt;</div>
        <div class="btn rightBtn">&gt;</div>
        <div class="sliderIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div> -->
    </div>
    <script src="utils.js"></script>
    <script>


        HTMLDivElement.prototype.createTurnPage = function (imgArr) {

            var self = this;
            createLi(imgArr);
            var oSliderPage = document.getElementsByClassName('sliderPage')[0];
            var oLeftBtn = document.getElementsByClassName('leftBtn')[0];
            var oRightBtn = document.getElementsByClassName('rightBtn')[0];
            var oSliderIndex = document.getElementsByClassName('sliderIndex')[0];
            var oSpan = oSliderIndex.getElementsByTagName('span');
            var moveWidth = oSliderPage.children[0].offsetWidth;
            var num = oSliderPage.children.length - 1;
            var timer = null;
            var lock = true; // 开锁
            var index = 0; // 小圆点下标
            var oSpanLen = oSpan.length;

            oLeftBtn.onclick = function () {
                autoMove('right->left');
            }
            oRightBtn.onclick = function () {
                autoMove('left->right');
            }

            for (var i = 0; i < oSpanLen; i++) {
                (function (myIndex) {
                    oSpan[i].onclick = function () {
                        lock = false;
                        clearTimeout(timer);
                        startMove(oSliderPage, {
                            left: - myIndex * moveWidth
                        }, function () {
                            lock = true;
                            timer = setTimeout(autoMove, 1500);
                            changeIndex(myIndex);
                        })
                    }
                }(i))
            }
            timer = setTimeout(autoMove, 1500);
            
            // direction
            // 默认轮播方向/right按钮  'left->right'  /  默认时为undefined
            // 点击left按钮   'right->left'
            function autoMove(direction) {
                if (lock) {
                    lock = false;
                    clearTimeout(timer); // 清除才不会一直加速
                    if (!direction || direction == 'left->right') {
                        index++;
                        startMove(oSliderPage, {
                            left: oSliderPage.offsetLeft - moveWidth
                        }, function () {
                            if (oSliderPage.offsetLeft == - num * moveWidth) {
                                oSliderPage.style.left = '0px';
                                index = 0;
                            }
                            lock = true;
                            timer = setTimeout(autoMove, 1500);
                            changeIndex(index);
                        });
                    } else if (direction == 'right->left') {
                        index--;
                        startMove(oSliderPage, {
                            left: oSliderPage.offsetLeft + moveWidth
                        }, function () {
                            if (oSliderPage.offsetLeft == 0) {
                                oSliderPage.style.left = - num * moveWidth + 'px';
                                index = num;
                            }
                            lock = true;
                            timer = setTimeout(autoMove, 1500);
                            changeIndex(index);
                        })
                    }
                }
            }
            function changeIndex(_index) {
                for (var i = 0; i < oSpanLen; i++) {
                    oSpan[i].className = '';
                }
                oSpan[_index].className = 'active';
            }

            function createLi(imgArr) {
                var liStr = '';
                imgArr.forEach(function (ele) {
                    liStr += '<li>\
                              <img src="' + ele + '" alt="">\
                              </li>'
                });
                var htmlStr =
                    '<ul class="sliderPage">' + liStr + '\
                </ul>\
                <div class="btn leftBtn">&lt;</div>\
                <div class="btn rightBtn">&gt;</div>\
                <div class="sliderIndex">\
                    <span class="active"></span>\
                    <span></span>\
                    <span></span>\
                    <span></span>\
                </div>';
                self.innerHTML = htmlStr;
            }

            
        }


        var oWrapper = document.getElementsByClassName('wrapper')[0];
        oWrapper.createTurnPage(['imgs/1.jpg', 'imgs/2.jpg', 'imgs/3.jpg', 'imgs/4.jpg', 'imgs/1.jpg']);
    </script>
</body>

</html>