jquery: update carousel logic & animate

2022-10-01 23:12:26
<!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>
    .box-content {
        width: 600px;
        margin: 40px auto;
    }

    .carousel-show {
        margin-bottom: 20px;
    }

    .carousel-show .item-list,
    .carousel-show .item-list .banner-position {
        position: relative;
        width: 600px;
        height: 400px;
        overflow: hidden;
    }

    .carousel-show .item-list li {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 600px;
        height: 400px;
        background-color: #ddd;
    }

    .carousel-show .item-list img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 400px;
        margin: auto;

    }

    .carousel-wrap {
        position: relative;
        width: 600px;
        height: 80px;
    }

    .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.next:hover {
        background-position: -23px -34px;
    }

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

    .carousel-container .arrow.previous:hover {
        background-position: 0 -34px;
    }

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

<body>
    <div class="box-content">
        <div class="carousel-show">
            <ul class="item-list" id="carouselShowList">
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_1.jpg" alt="">
                        </a>
                    </div>
                </li>
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_2.png" alt="">
                        </a>
                    </div>
                </li>
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_3.jpg" alt="">
                        </a>
                    </div>
                </li>
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_4.png" alt="">
                        </a>
                    </div>
                </li>
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_5.jpg" alt="">
                        </a>
                    </div>
                </li>
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_6.jpg" alt="">
                        </a>
                    </div>
                </li>
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_7.jpg" alt="">
                        </a>
                    </div>
                </li>
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_8.jpg" alt="">
                        </a>
                    </div>
                </li>
                <li>
                    <div class="banner-position">
                        <a href="javascript:;">
                            <img src="../images/1400x933_9.png" alt="">
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <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.jpg" alt="">
                    </li>
                    <li>
                        <p><a href="javascript:;">图2</a></p>
                        <em></em>
                        <img src="../images/112x80_2.png" alt="">
                    </li>
                    <li>
                        <p><a href="javascript:;">图3</a></p>
                        <em></em>
                        <img src="../images/112x80_3.jpg" alt="">
                    </li>
                    <li>
                        <p><a href="javascript:;">图4</a></p>
                        <em></em>
                        <img src="../images/112x80_4.png" 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.jpg" alt="">
                    </li>
                    <li>
                        <p><a href="javascript:;">图9</a></p>
                        <em></em>
                        <img src="../images/112x80_9.png" alt="">
                    </li>
                </ul>
                <a href="javascript:;" class="arrow previous" id="arrowPrev"></a>
                <a href="javascript:;" class="arrow next" id="arrowNext"></a>
            </div>
        </div>
    </div>
</body>
<script src="../JavaScript/jquery.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        let index = 0;
        let isMoveOver = true;
        let arrowPrev = $(‘#arrowPrev‘);
        let arrowNext = $(‘#arrowNext‘);
        let carouselList = $(‘#carouselList‘);
        let carouselCurrent = $(‘#carouselCurrent‘);
        let carouselListItems = $(‘#carouselList li‘);
        let listLength = carouselListItems.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‘);

        showCurrentCarousel(index);

        function showCurrentCarousel(index) {
            $(‘#carouselShowList li‘).css({
                display: ‘none‘
            });
            $(‘#carouselShowList li‘).eq(index).css({
                display: ‘block‘
            });
        }

        carouselListItems.each(function (index) {
            $(this).click(function () {
                let newLeft = parseInt($(this).offset().left) - stepWidth;
                carouselCurrent.css(‘left‘, newLeft);
                showCurrentCarousel(index);
            })
        })

        arrowPrev.click(function () {
            if (isMoveOver) {
                movePrev();
            }
        });
        arrowNext.click(function () {
            if (isMoveOver) {
                moveNext();
            }
        });

        function resetMoveOver() {
            isMoveOver = true;
        }

        function movePrev() {
            isMoveOver = false;
            let picLeft = parseFloat(carouselList.css(‘left‘));
            let curLeft = parseFloat(carouselCurrent.css(‘left‘));
            if (curLeft > 0 && curLeft <= fixCurPonit) {
                index--;
                let newCurLeft = curLeft - stepWidth;
                //carouselCurrent.css(‘left‘, `${newCurLeft}px`);
                carouselCurrent.animate({ left: `${newCurLeft}px` }, 300, resetMoveOver);
            } else if (picLeft === 0 && curLeft === 0) {
                index = listLength - 1;
                carouselCurrent.css(‘left‘, `${fixCurPonit}px`);
                carouselList.css(‘left‘, `${pointPicWidth}px`);
                isMoveOver = true;
            } else {
                index--;
                let newPicLeft = picLeft + stepWidth;
                //carouselList.css(‘left‘, `${newPicLeft}px`);
                carouselList.animate({ left: `${newPicLeft}px` }, 300, resetMoveOver)
            }
            showCurrentCarousel(index);
        }

        function moveNext() {
            isMoveOver = false;
            let picLeft = parseFloat(carouselList.css(‘left‘));
            let curLeft = parseFloat(carouselCurrent.css(‘left‘));
            if (picLeft < pointCurWidth && curLeft < fixCurPonit) {
                index++;
                let newCurLeft = curLeft + stepWidth;
                //carouselCurrent.css(‘left‘, `${newCurLeft}px`);
                carouselCurrent.animate({ left: `${newCurLeft}px` }, 300, resetMoveOver);
            } else if (picLeft === pointPicWidth && curLeft === fixCurPonit) {
                index = 0;
                carouselCurrent.css(‘left‘, ‘0‘);
                carouselList.css(‘left‘, ‘0‘);
                isMoveOver = true;
            } else {
                index++;
                let newPicLeft = picLeft - stepWidth;
                //carouselList.css(‘left‘, `${newPicLeft}px`);
                carouselList.animate({ left: `${newPicLeft}px` }, 300, resetMoveOver)
            }
            showCurrentCarousel(index);
        }
    })
</script>

</html>
码农公寓

相关文章
