jqury实现图片轮播（自动轮播+手动轮播），简单易学，热血奉献

最新推荐文章于 2021-01-19 22:43:55 发布

huanthony

最新推荐文章于 2021-01-19 22:43:55 发布

阅读量578

点赞数

分类专栏： jquery 文章标签： jquery图片轮播 jquery图片左右滑动轮播 jquery图片无缝轮播

本文链接：https://blog.csdn.net/huanthony/article/details/100553192

版权

本文介绍了一种使用jQuery实现的左右无缝滑动图片轮播的方法，通过animate进行位移控制，前端使用LI元素并设置背景颜色来模拟图片轮播效果。适合初学者，提供完整代码示例。

摘要由CSDN通过智能技术生成

博主最近在搞图片轮播图，经过多方查阅资料，经典jquery轮播图分为两种，第一种呼吸轮播图，第二种是左右无缝滑动轮播图。本例为第二种方法，原理大同小异，最大的区别在于图片的摆放方式，呼吸轮播图是所有图片叠在一起通过display控制，本例使用的方法是animate 位移的进行控制，前端所有图片float排序，逐个依次循环显示，前台用LI代替图片，需要图片的自行引入，不加入图片也可以演示，本博主已通过JQ代码将LI已随机设置背景颜色，初学的朋友可直接复制最后一个代码段使用。

前端html代码：

<body>
    <div class="box">
        <ul class="img">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="move">
            <li>&lt;</li>
            <li>&gt;</li>
        </ul>
        <ul class="num"></ul>
    </div>
</body>

样式代码：

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #eee;
        }

        .box {
            width: 680px;
            height: 340px;
            margin: 50px auto;
            background: #fff;
            position: relative;
            overflow: hidden;
        }

        ul, li {
            list-style: none;
        }

        .box .img {
            width: 5000px;
            position: absolute;
            top: 0;
            left: 0;
            height: 340px;
        }

        .box:hover .move {
            display: block;
        }

        .img > li {
            width: 680px;
            height: 340px;
            float: left;
            /*opacity: 0.2;*/
        }

        .move {
            width: 30px;
            height: 50px;
            line-height: 50px;
            display: none;
        }

            .move li {
                top: 50%;
                margin-top: -25px;
                position: absolute;
                width: 30px;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
                color: #fff;
                background: rgba(0,0,0,.6);
                text-align: center;
            }

                .move li:nth-of-type(2) {
                    right: 0;
                }

        .num {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 15px;
            text-align: center;
        }

            .num li {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                display: inline-block;
                background: orange;
                margin: 0 5px;
            }

                .num li.on {
                    background: lightg