jquery: sand picture

DOCTYPE html>
html lang="en">

head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Carouseltitle>
    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:;">图1a>p>
                        em>em>
                        img src="../images/112x80_1.jpg" alt="">
                    li>
                    li>
                        p>a href="javascript:;">图2a>p>
                        em>em>
                        img src="../images/112x80_2.png" alt="">
                    li>
                    li>
                        p>a href="javascript:;">图3a>p>
                        em>em>
                        img src="../images/112x80_3.jpg" alt="">
                    li>
                    li>
                        p>a href="javascript:;">图4a>p>
                        em>em>
                        img src="../images/112x80_4.png" alt="">
                    li>
                    li>
                        p>a href="javascript:;">图5a>p>
                        em>em>
                        img src="../images/112x80_5.jpg" alt="">
                    li>
                    li>
                        p>a href="javascript:;">图6a>p>
                        em>em>
                        img src="../images/112x80_6.jpg" alt="">
                    li>
                    li>
                        p>a href="javascript:;">图7a>p>
                        em>em>
                        img src="../images/112x80_7.jpg" alt="">
                    li>
                    li>
                        p>a href="javascript:;">图8a>p>
                        em>em>
                        img src="../images/112x80_8.jpg" alt="">
                    li>
                    li>
                        p>a href="javascript:;">图9a>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>