代码可直接复制粘贴使用

效果图：
轮播图

轮播图上的图片我没有上传，大家可自行使用自己喜欢的图片。
只要在“.ui-swiper”外再套一个有大小的盒子，就可以实现轮播图的自定义大小。

全部源码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>图片轮播_由我湾</title>
    <style>
        body {
            margin: 0;
        }
        
        .ui-swiper,
        .ui-swiper>.item {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .ui-swiper>.item {
            opacity: 0;
            position: absolute;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            transition: opacity 1s;
            -webkit-transition: opacity 1s;
        }
        
        .ui-swiper>.active {
            opacity: 1;
            z-index: 1;
        }
        
        .ui-swiper .jumpBtn {
            position: absolute;
            bottom: 20px;
        }
        
        .ui-swiper .jumpBtn {
            width: 100%;
            position: absolute;
            bottom: 5px;
            text-align: center;
            z-index: 10;
        }
        
        .ui-swiper .jumpBtn ul {
            margin-bottom: 0px;
            padding: 0px;
        }
        
        .ui-swiper .jumpBtn ul li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            background-color: white;
            opacity: 0.9;
            margin-left: 5px;
            transition: .5s;
            border: #fff 2px solid;
        }
        
        .ui-swiper .jumpBtn ul .active {
            background-color: #4a90e2;
            transition: background-color 1s;
        }
        
        .ui-swiper .jumpBtn ul li:hover,
        .ui-swiper .jumpBtn ul li:active {
            border: #4a90e2 2px solid;
        }
        
        .ui-swiper .preImg,
        .ui-swiper .nexImg {
            position: absolute;
            top: calc(50% - 50px);
            z-index: 2;
            background-size: cover;
            background-position: center;
            border-radius: 5px;
        }
        
        .ui-swiper .preImg>img,
        .ui-swiper .nexImg>img {
            display: block;
        }
        
        .ui-swiper .preImg {
            left: 10px;
        }
        
        .ui-swiper .nexImg {
            right: 10px;
        }
        
        .ui-swiper .preImg,
        .ui-swiper .nexImg,
        .ui-swiper .jumpBtn ul li {
            cursor: pointer;
            background-color: #CCABD8;
        }
    </style>
</head>

<body>
    <div class='swiper' style="width:100%;height:100vh;">
        <div class='ui-swiper'>
            <!-- <div class='item active'></div>
            <div class='item'></div> -->
            <div class='jumpBtn'>
                <ul>
                    <!-- <li jump='0' class='active'></li>
                    <li jump='1'></li> -->
                </ul>
            </div>
            <div class="preImg">
                <img src="img/preImg.png">
            </div>
            <div class="nexImg">
                <img src="img/nexImg.png">
            </div>
        </div>
    </div>
    <script>
        (function() {
            var timer = null;
            var curImg = 0;
            var $imgItems = null;
            var $jumpBtns = null;
            var imgList = ["86E3CE", "D0E6A5", "FFDD94", "FA897B", ]; //此处修改轮播图片
            $(document).ready(function() {
                var $swiper = $(".ui-swiper");
                var $ul = $(".ui-swiper>.jumpBtn>ul");
                for (var i in imgList) {
                    var $imgItem = $("<div>");
                    var $jumpBtn = $("<li>");
                    if (i == 0) {
                        $imgItem.attr("class", "item active");
                        $jumpBtn.attr({
                            "jump": i,
                            "class": "active"
                        });
                    } else {
                        $imgItem.attr("class", "item");
                        $jumpBtn.attr("jump", i);
                    }
                    $imgItem.css("background-color", "#" + imgList[i] + ""); //此处修改轮播图片
                    $swiper.append($imgItem);
                    $ul.append($jumpBtn);
                }

                $imgItems = $(".ui-swiper>.item");
                $jumpBtns = $(".ui-swiper>.jumpBtn>ul>li");
                timer = setInterval(intervalImgs, 3000);
                //switch image
                $jumpBtns.click(function() {
                    clearInterval(timer);
                    curImg = $(this).attr("jump");
                    $imgItems.removeClass("active");
                    $jumpBtns.removeClass("active");
                    $imgItems.eq(curImg).addClass("active");
                    $jumpBtns.eq(curImg).addClass("active");
                    timer = setInterval(intervalImgs, 3000);
                })
            });
            //interval images
            function intervalImgs() {
                var length = imgList.length;
                if (!length)
                    return;
                else if (curImg < length - 1)
                    curImg++;
                else
                    curImg = 0;
                $imgItems.removeClass("active");
                $jumpBtns.removeClass("active");
                $imgItems.eq(curImg).addClass("active");
                $jumpBtns.eq(curImg).addClass("active");
            }
            //preview image
            $(".preImg").click(function() {
                    var preImg = curImg;
                    //clear timer
                    clearInterval(timer);
                    if (curImg == 0)
                        curImg = imgList.length - 1;
                    else
                        curImg--;
                    $imgItems.eq(preImg).removeClass("active");
                    $imgItems.eq(curImg).addClass("active");

                    $jumpBtns.eq(preImg).removeClass("active");
                    $jumpBtns.eq(curImg).addClass("active");
                    timer = setInterval(intervalImgs, 3000);
                })
                //next image
            $(".nexImg").click(function() {
                clearInterval(timer);
                intervalImgs();
                timer = setInterval(intervalImgs, 3000);
            })
        })();
    </script>
</body>

</html>

更多精彩，尽在我的小网站: 由我湾

来源：CSDN

作者：瞎跑的uice

链接：https://blog.csdn.net/weixin_43029943/article/details/103464926

标签

background

轮播

jquery

jQuery 图片轮播

代码可直接复制粘贴使用