jquery: carousel arrow click

小仙儿

2020-06-25

实现原理：父元素为定宽定高相对定位，且overflow：hidden，子元素为绝对定位高度继承父元素，宽度可计算或设置一个大值，通过绝对定位的left来决定显示的子元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel</title>
    <link rel="stylesheet" href="../css/reset.css">
</head>
<style>
    .carousel-wrap {
        position: relative;
        width: 600px;
        height: 80px;
        margin: 40px auto;
    }

    .carousel-wrap .current {
        position: absolute;
        left: 0;
        top: -5px;
        width: 112px;
        height: 85px;
        background: url("../images/carousel-cur.png") no-repeat center center;
        cursor: pointer;
        z-index: 103;
    }

    .carousel-container {
        position: relative;
        width: 600px;
        height: 80px;
        text-align: center;
        overflow: hidden;
    }

    .carousel-container .carousel-list {
        position: absolute;
        width: 800px;
        height: 80px;
        left: 0;
    }

    .carousel-container .carousel-list li {
        position: relative;
        float: left;
        cursor: pointer;
        width: 112px;
        height: 80px;
        margin-right: 10px;
        overflow: hidden;
    }

    .carousel-container .carousel-list li em {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 112px;
        height: 26px;
        background-color: #000;
        opacity: 0.6;
        z-index: 102;
    }

    .carousel-container .carousel-list li p {
        position: absolute;
        bottom: 0;
        width: 112px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        z-index: 103;
    }

    .carousel-container .carousel-list li p a {
        color: #fff;
        font-size: 12px;
    }

    .carousel-container .carousel-list li img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 80px;
        z-index: 100;
    }

    .carousel-container .carousel-list li img:hover {
        transform: scale(1.05);
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
    }

    .carousel-container .arrow {
        position: absolute;
        width: 22px;
        height: 33px;
        z-index: 104;
        background: url("../images/arrow.png");
    }

    .carousel-container .arrow.next {
        background-position: -23px 0;
        top: 20px;
        right: 0;
    }

    .carousel-container .arrow.previous {
        background-position: 0 0;
        top: 20px;
        left: 0;
    }

    .carousel-container .current {
        position: absolute;
        left: 0;
        width: 114px;
        height: 84px;
        border: 2px solid #ddd;
    }
</style>

<body>
    <div class="carousel-wrap">
        <div class="current" id="carouselCurrent"></div>
        <div class="carousel-container">
            <ul class="carousel-list" id="carouselList">
                <li>
                    <p><a href="javascript:;">样板间1</a></p>
                    <em></em>
                    <img src="../images/112x80_1.png" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">全景看房2</a></p>
                    <em></em>
                    <img src="../images/112x80_2.jpg" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">活动现场3</a></p>
                    <em></em>
                    <img src="../images/112x80_3.png" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">证件照4</a></p>
                    <em></em>
                    <img src="../images/112x80_4.jpg" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">户型5</a></p>
                    <em></em>
                    <img src="../images/112x80_5.jpg" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">交通图6</a></p>
                    <em></em>
                    <img src="../images/112x80_6.jpg" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">实景图7</a></p>
                    <em></em>
                    <img src="../images/112x80_7.jpg" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">视频8</a></p>
                    <em></em>
                    <img src="../images/112x80_8.png" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">证件9</a></p>
                    <em></em>
                    <img src="../images/112x80_9.jpg" alt="">
                </li>
                <li>
                    <p><a href="javascript:;">证件10</a></p>
                    <em></em>
                    <img src="../images/112x80_9.jpg" alt="">
                </li>
            </ul>
            <a href="javascript:;" class="arrow previous" id="arrowPrev"></a>
            <a href="javascript:;" class="arrow next" id="arrowNext"></a>
        </div>
    </div>
</body>
<script src="../JavaScript/jquery.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        let arrowPrev = $(‘#arrowPrev‘);
        let arrowNext = $(‘#arrowNext‘);
        let carouselList = $(‘#carouselList‘);
        let carouselCurrent = $(‘#carouselCurrent‘);
        let listLength = $(‘#carouselList li‘).length; //轮播总数
        let showLength = 5;
        let stepWidth = 122;
        let fixCurPonit = (showLength - 1) * stepWidth; //488
        let pointCurWidth = stepWidth - (listLength - showLength) * stepWidth;
        let pointPicWidth = (showLength - listLength) * stepWidth;

        carouselList.css(‘width‘, (listLength + 1) * 112 + ‘px‘)

        arrowPrev.click(function () {
            move(stepWidth);
        });
        arrowNext.click(function () {
            move(-stepWidth);
        });

        function move(offset) {
            let picLeft = parseFloat(carouselList.css(‘left‘));
            let curLeft = parseFloat(carouselCurrent.css(‘left‘));
            if (picLeft < pointCurWidth && curLeft < fixCurPonit) {
                let newCurLeft = curLeft - offset;
                //carouselCurrent.css(‘left‘, `${newCurLeft}px`);
                carouselCurrent.animate({ left: `${newCurLeft}px` }, 300);
            } else if (picLeft === pointPicWidth && curLeft === fixCurPonit) {
                carouselCurrent.css(‘left‘, ‘0‘);
                carouselList.css(‘left‘, ‘0‘);
            } else {
                let newPicLeft = picLeft + offset;
                //carouselList.css(‘left‘, `${newPicLeft}px`);
                carouselList.animate({ left: `${newPicLeft}px` }, 300)
            }
        }
    })
</script>

</html>

position jquery arrow absolute