分享一个好用的web前端滚动条

直接将各部分代码复制即可，只需修改图片路径

HTML部分代码

<div class="slide">
            <div id="slide">
                <ul class="pic-list">
                    <li><img src="images/微信图片_20191205123205.jpg"></li>
                    <li><img src="images/微信图片_20191205123213.jpg"></li>
                    <li><img src="images/微信图片_20191205123219.jpg"></li>
                    <li><img src="images/微信图片_20191205123205.jpg"></li>
                </ul>
                <div class="btn next">></div>
                <div class="btn prev"><</div>
                <ul class="icon-list">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

css部分代码

#slide{height: 300px;width:600px;margin: 0px;position: relative;overflow: hidden;}
.pic-list{width: 2400px;height: 300px;position: absolute;top: 0;left: 0;overflow: hidden;}
.pic-list li img{width: 100%;height: auto;}
.btn{opacity: 0;position: absolute;top: 50%;height: 50px;width: 50px;border-radius: 50%;cursor: pointer;user-select: none;background: white;font-size: 25px;line-height: 50px;text-align: center;transition: all 1s;transform: translateY(-50%);}
.next{right: 50px;}
.prev{left: 50px;}
.icon-list{position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);}
.icon-list li{float: left;margin: 0 10px;height: 10px;width: 10px;border-radius: 50%;background: #ccc;cursor: pointer;}
.icon-list .active{background: #fff;}

Javascripts

<script type="text/javascript">
        $(function () {
            var timer = null;
            var index = 0;
            $(".next").click(function () {
                next();
            });
            $(".prev").click(function () {
                prev();
            })
            function next() {
                index++;
                if (index > 2) {
                    $(".pic-list").animate({ left: -(index) * 600px }, 1000); index = 0; $(".pic-list").animate({ left: 0 }, 0);
                }
                $(".pic-list").animate({ left: -index * 600px }, 1000);
                iconHover(index);
            }
            function prev() {
                index--;
                if (index < 0) {
                    index = 2;
                    $(".pic-list").animate({ left: -(index + 1) * 1000 }, 0);
                }
                $(".pic-list").animate({ left: -index * 600px }, 1000);
                iconHover(index);
            }
            function auto() {
                timer = setInterval(function () {
                    next();
                    iconHover(index);
                }, 3000)
            }
            auto();
            $("#slide").mouseover(function () { clearInterval(timer); $('.btn').css("opacity", 0.5) })
            $("#slide").mouseleave(function () {
                auto(); $('.btn').css("opacity", 0)
            })
            $(".icon-list li").mouseover(function () {
                var index = $(this).index();

                $(".pic-list").animate({ left: -index * 600px }, 1000); iconHover(index);
            })
            function iconHover(index) { $(".icon-list li").eq(index).addClass("active").siblings().removeClass("active"); }
        })	
    </script>