无缝轮播

最新推荐文章于 2024-07-09 17:21:18 发布

小白style

最新推荐文章于 2024-07-09 17:21:18 发布

阅读量158

点赞数

分类专栏： JavaSctipt

本文链接：https://blog.csdn.net/weixin_43076899/article/details/103032375

版权

JavaSctipt 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #bgblock {
        width: 960PX;
        height: 400px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .carousel {
        width: 960px;
        height: 400px;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .carousel_item {
        float: left;
        width: 960px;
        height: 400px;
        list-style-type: none;
    }

    .carousel_item>img {
        width: 960px;
        height: 400px;
    }

    .pointer {
        width: 225px;
        height: 50px;
        border-radius: 25px;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -150px;
    }

    .pointer_item {
        width: 30px;
        height: 30px;
        list-style-type: none;
        float: left;
        margin-top: 10px;
        margin-left: 15px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        border-radius: 15px;
        background-color: #ffffff;
    }

    .pointer_item_active {
        color: #FFFFFF;
        background: #31c27c;
    }

    .carousel_btn {
        width: 50px;
        height: 48px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        margin-top: -24px;
        background-repeat: no-repeat;
    }
</style>

<body>
    <div id="bgblock">
        <ul class="carousel">
            <li class="carousel_item">
                <img src="images/banner0.jpg" />
            </li>
            <li class="carousel_item">
                <img src="images/banner1.jpg" />
            </li>
            <li class="carousel_item">
                <img src="images/banner2.jpg" />
            </li>
            <!-- <li class="carousel_item">
                <img src="images/banner0.jpg" />
            </li>
            <li class="carousel_item">
                <img src="images/banner1.jpg" />
            </li> -->
        </ul>

        <div class="carousel_btn carousel_btn_left"></div>
        <div class="carousel_btn carousel_btn_right"></div>
    </div>
    <ul class="pointer">
        <li class="pointer_item pointer_item_active">1</li>
        <li class="pointer_item">2</li>
        <li class="pointer_item">3</li>
        <!-- <li class="pointer_item">4</li>
        <li class="pointer_item">5</li> -->
    </ul>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    var carousel = $(".carousel"),//轮播图
        carouselItem = $(".carousel_item"),//轮播图item
        carouselItemWidth = carouselItem.eq(0).width(),//一个img的宽度
        pointer_item = $(".pointer_item"),//指示器
        btnLeft = $(".carousel_btn_left"),//左按钮
        btnRight = $(".carousel_btn_right");//右按钮
    var nowIndex = 0,
        autoplay = true;

    carousel.append(carouselItem.eq(0).clone());
    carouselItem = $(".carousel_item");
    carousel.width(carouselItem.length * 960);
    //左切换按钮事件
    btnLeft.click(function () {
        nowIndex--;
        imgTransfrom(nowIndex);
    })
    //右切换按钮事件
    btnRight.click(function () {
        nowIndex++;
        imgTransfrom(nowIndex);
    })
    //指示器切换事件
    pointer_item.click(function () {
        var index = $(this).index();
        imgTransfrom(index);
    })

    //自动播放
    setInterval(function () {
        if (autoplay) {
            btnRight.click();
        }
    }, 1500)

    function imgTransfrom(index) {
        if (index < 0) {
            index = carouselItem.length - 2;
            carousel.css("left", -(carouselItem.length - 1) * carouselItemWidth);
        }
        if (index > carouselItem.length - 1) {
            index = 1;
            carousel.css("left", 0);
        }
        nowIndex = index;
        carousel.animate({
            left: -index * carouselItemWidth
        }, 500)
        if (index == carouselItem.length - 1) {
            pointer_item.eq(0).addClass("pointer_item_active");
            pointer_item.eq(0).siblings().removeClass("pointer_item_active");
        } else {
            pointer_item.eq(index).addClass("pointer_item_active");
            pointer_item.eq(index).siblings().removeClass("pointer_item_active");
        }
    }
</script>

</html>