用Jquery制作轮播图

html代码 

<div class="lunbo">
<div class="container">
            <div class="lunbolist">
                <div class="swrapper" style="left:0px;">
                    <img class="scrollImg ac" src="img/bannerback.jpg">
                    <img class="scrollImg ac" src="img/bannerback2.jpg">
                    <img class="scrollImg ac" src="img/bannerback3.jpg">
                    <img class="scrollImg ac" src="img/bannerback4.jpg">
                    <img class="scrollImg ac" src="img/bannerback5.jpg">
                </div>
                <!-- 如果需要分页器 -->
                <div class="spagination">
                    <a href="javascript:;" index="1" name="first"></a>
                    <a href="javascript:;" index="2"></a>
                    <a href="javascript:;" index="3"></a>
                    <a href="javascript:;" index="4"></a>
                    <a href="javascript:;" index="5"></a>
                </div>
                <a class="sbutton-prev"><i class="iconfont ileft">&#xe642;</i></a>
                <a class="sbutton-next "><i class="iconfont">&#xe633;</i></a>
            </div>

        </div>
</div>

css代码

 .container {
     margin: 0 auto;
     width: 1226px;
     position: relative;
     /* border: 1px solid black; */
 }
.lunbo .lunbolist {
     width: 1226px;
     height: 460px;
     /* display:flex;  */
     overflow: hidden;
     position: relative;
 }
 
 .lunbo .lunbolist .swrapper {
     height: 460px;
     position: absolute;
     /* left:0px; */
     width: 30000px;
     z-index: 2;
 }
 
 .lunbo .lunbolist .scrollImg {
     width: 1226px;
     height: 460px;
     float: left;
     /* display: block; */
     z-index: 100;
 }
 /* 分页器 */
 
 .spagination {
     width: 400px !important;
     /* left: auto !important; */
     right: 30px !important;
     bottom: 20px !important;
     text-align: right !important;
     position: absolute;
     z-index: 2;
 }
 
 .spagination a {
     cursor: pointer;
     display: inline-block;
     width: 6px;
     height: 6px;
     border: 2px solid #fff;
     border-color: rgba(247, 243, 243, 0.8);
     border-radius: 10px;
     background-color: black;
     margin-right: 5px;
 }
 
 .spagination .active {
     border-color: grey;
     background-color: white;
 }
 
 .sbutton-prev {
     position: absolute;
     top: 50%;
     width: 41px;
     height: 69px;
     margin-top: -35px;
     vertical-align: center;
     z-index: 2;
     outline: none;
     left: 234px !important;
     line-height: 69px;
     display: inline-block;
     text-align: center;
 }
 
 .sbutton-prev:hover {
     background-color: #5f5750;
     opacity: 0.5;
     color: white;
 }
 
 .sbutton-next {
     position: absolute;
     top: 50%;
     width: 41px;
     height: 69px;
     margin-top: -35px;
     z-index: 2;
     cursor: pointer;
     outline: none;
     right: 0;
     line-height: 69px;
     vertical-align: center;
     display: inline-block;
     text-align: center;
 }
 
 .sbutton-next:hover {
     background-color: #5f5750;
     opacity: 0.5;
     color: white;
 }

Jquery代码

 <script>
        var index = 0;
        var setTime;
        // 自动播放
        autoNextPage();

        function autoNextPage() {
            setTime = setInterval(function() {
                nextButton(true);
            }, 3000);
        }
        // 鼠标移入，停止自动播放
        $(".lunbolist").mouseover(function() {
            clearInterval(setTime);
        });
        // 鼠标移出，开始自动播放
        $(".lunbolist").mouseout(function() {
                autoNextPage();
            })
            // 上一页
        $(".sbutton-prev").click(function() {
                clearInterval(setTime);
                nextButton(false);
            })
            // 下一页
        $(".sbutton-next").click(function() {
            clearInterval(setTime);
            nextButton(true);
        })


        var buttonnum = $('.spagination a');
        //    分页器点击事件
        buttonnum.on('click', function() {

            clearInterval(setTime)
            var j = $(this).attr('index') - 1
            var leftlength = -1226 * j;
            f(leftlength)
            $(this).attr('class', 'active')
                // 置当前点击的小圆点的类名为active
        })

        // 分页器每个小圆点都失去active类与对应图片显示
        function f(leftlength) {
            for (var i = 0; i < 5; i++) {
                $('.spagination a').eq(i).attr('class', '')
            }
            $('.swrapper').animate({
                left: leftlength + 'px'
            });
        }

        // 判断是要上一页还是下一页
        function nextButton(next) {
            var leftlength = 0;
            if (next) {
                // 往后走
                if (index == 5) {
                    leftlength = 0;
                    index = 1;
                } else {
                    index++;
                }
                leftlength = -1226 * (index - 1);
            } else {
                // 往前走
                if (index == 1) {
                    index = 5;
                } else {
                    index--;
                }
                leftlength = -1226 * (index - 1);
            }
            f(leftlength)
            $('.spagination a').eq(index - 1).attr('class', 'active')
        }
    </script>

轮播页面展示 

注意引入自己的图片资源和Jquery，上一页下一页的图标是使用的iconfont