轮播图效果

最新推荐文章于 2024-08-26 09:57:43 发布
scarsun
最新推荐文章于 2024-08-26 09:57:43 发布
阅读量136
点赞数
本文链接：https://blog.csdn.net/scarsun/article/details/81312083
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        #carousel {
            width:640px ;
            height: 414px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        #list{
            position: absolute;
            width: 3840px;
        }
        #list li {
            float: left;
        }
        #list img{
            width:640px ;
            height: 414px;
            vertical-align: bottom;
        }
        #direction-btn {
            display: none;
        }
        #direction-btn a{
            text-decoration: none;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            width: 30px;
            line-height: 60px;
            font-size: 20px;
            color: #fff;
            text-align: center;
            background: rgba(0,0,0,.3);
        }
        #right-btn {
            right: 0;
        }
        #small-btn {
            position: absolute;
            bottom:20px;
            margin-left: 50%;
            font-size: 0;
            padding: 0 6px;
            background: rgba(255,255,255, .4);
            border-radius: 10px;
            transform: translateX(-50%);
        }
        #small-btn a{
            margin: 4px 2px;
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: skyblue;
        }
        #small-btn .active{
            background: mediumpurple;
        }
    </style>
</head>
<body>
    <div id="carousel">
        <ul id="list">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.png" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpeg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
        </ul>
        <div id="direction-btn">
            <a href="javascript:;" id="left-btn"> < </a>
            <a href="javascript:;" id="right-btn"> > </a>
        </div>
        <div id="small-btn">
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
    <script src="../common.js"></script>
    <script>

        var
            carousel = $( 'carousel'),
            list  = $('list'),
            listLi = list.children;
            directionBtn = $('direction-btn');
            rightBtn = $( 'right-btn'),
            leftBtn = $( 'left-btn'),
            smallBtn = $( 'small-btn'),
            smallBtnA = Array.from(smallBtn.children);
            index = 0, //图片
            dotIndex = 0; //小按钮
            timer = null;

            const LI_width = 640;

            //复制第一张放到最后的位置
            list.innerHTML += listLi[0].outerHTML;
            //改变宽度
            list.style.width = listLi.length * LI_width + 'px';

            carousel.onmouseover = function (){
                clearInterval(timer);
            directionBtn.style.display = 'block';
        };
            carousel.onmouseout = function (){
                autoMove();
            directionBtn.style.display = 'none';
        };

        // 左侧按钮
        leftBtn.onclick = function () {
            //针对轮播图
            index--;
            if(index < 0) {
                index = listLi.length - 2;
                list.style.left = - (listLi.length - 1) * LI_width + 'px';
            }
            bufferMove(list,{left: - index * LI_width });

            //针对小按钮
            dotIndex--;
            if(dotIndex < 0) {
                dotIndex = smallBtnA.length-1;
            }
            smallBtnA.forEach(v => v.classList.remove( 'active'));
            smallBtnA[dotIndex].classList.add( 'active');

        };
        // 右侧按钮
        rightBtn.onclick = function () {
            rightMove();
        };
        //给小按钮添加鼠标进入事件
        smallBtnA.forEach( (v, k) => {
           v.onmouseover = function(){
               dotIndex = k;
               smallBtnA.forEach(v => v.classList.remove( 'active'));
               smallBtnA[dotIndex].classList.add( 'active');

               index = k;
               bufferMove(list,{left: - index * LI_width });
           };
        });

        autoMove();
        function autoMove() {
            timer = setInterval(function () {
                rightMove();
            }, 5000);
        };

        function rightMove(){
            //针对轮播图
            index++;
            if(index >= listLi.length){
                index = 1;
                list.style.left = 0;
            }
            bufferMove(list,{left: - index * LI_width });

            //针对小按钮
            dotIndex++;
            if(dotIndex >= smallBtnA.length) {
                dotIndex = 0;
            }
            smallBtnA.forEach(v => v.classList.remove( 'active'));
            smallBtnA[dotIndex].classList.add( 'active');
        };
    </script>
</body>
</html>