编写可复用的无缝滚动轮播图

最新推荐文章于 2024-02-27 15:51:03 发布

小白变怪兽

最新推荐文章于 2024-02-27 15:51:03 发布

阅读量1.6k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u013558749/article/details/51725109

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、首先定义好html框架，代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style/shuff-sm.css"/>
    </head>
    <body>

        <div class="shuff js-shuff">
            <div class="shuff-in js-shuff-in">
                <ul class="list js-shuff-list">
                    <li class="item js-shuff-item">
                        <img src="images/01.jpg" />
                    </li>
                    <li class="item js-shuff-item">
                        <img src="images/02.jpg" />
                    </li>
                    <li class="item js-shuff-item">
                        <img src="images/03.jpg" />
                    </li>
                    <li class="item js-shuff-item">
                        <img src="images/04.jpg" />
                    </li>
                    <li class="item js-shuff-item">
                        <img src="images/01.jpg" />
                    </li>
                    <li class="item js-shuff-item">
                        <img src="images/02.jpg" />
                    </li>
                    <li class="item js-shuff-item">
                        <img src="images/03.jpg" />
                    </li>
                    <li class="item js-shuff-item">
                        <img src="images/04.jpg" />
                    </li>

                </ul>
                <ol class="list-icon js-list-icon">
                </ol>
            </div>
            <a class="btn left-btn js-left-btn"></a>
            <a class="btn right-btn js-right-btn"></a>

        </div>

        <script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/shuff-sm.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

二、接下来编写css样式，代码如下（此处粘贴的是scss代码）

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

img{
    display: block;
}

.shuff{
    position: relative;
    width: 1640px;
    margin: 0 auto;
    >.shuff-in{
        position: relative;
        width: 1600px;
        margin: 100px auto;
        overflow: hidden;
        >.list{
            position: relative;
            left: 0;
            width: 4800px;
            overflow: hidden;
            >.item{
                float: left;
            }
        }

        >.list-icon{
            width: 160px;
            height: 11px;
            overflow: hidden;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -42px;
            z-index: 10;
            li{
                width: 10px;
                height: 10px;
                float: left;
                background: url(../images/00.png);
                background-position: -3px -14px;
                margin-left: 10px;
                cursor: pointer;

                &.active{
                    background-position: -3px -3px;
                }
            }
        }
    }
    >.btn{
        display: block;
        width: 50px;
        height: 45px;
        position: absolute;
        top: 150px;
        cursor: pointer;
        background: url(../images/arr.png);
        &.left-btn{
            left: 0;
            background-position: 0px -57px;
        }
        &.right-btn{
            right: 0;
            background-position: -52px -57px;
        }
    }
}

三、最后就是要通过js去实现轮播的效果了，代码如下

$(function(){
    // 实例化轮播图
    var shuff = new ShuffFn({
        iconBoxName:".js-list-icon",
        iconLiName:".js-list-icon li",
        listName:".js-shuff-list",
        itemName:".js-shuff-list li"
    });
})

function ShuffFn(o){
    this.boxName = o.boxName || ".js-shuff"; //外层大盒子
    this.iconBoxName = o.iconBoxName;        //放置轮播按钮的盒子
    this.iconLiName = o.iconLiName;          //轮播按钮子元素
    this.listName = o.listName;              //图片列表ul
    this.itemName = o.itemName;              //图片列表li
    this.leftBtn = o.leftBtn || ".js-left-btn";//向左按钮
    this.rightBtn = o.rightBtn || ".js-right-btn";//向右按钮
    this.shuffSpeed = o.shuffSpeed || 3000;       //每隔多少时间滚动一次（autoplay）
    this.imgSpeed = o.imgSpeed || 500;           //图片切换速度
    this.autoPlayTrue = o.autoPlayTrue || "true";//是否自动轮播
    this.boxNum = o.boxNum || "2";              //每次轮播图片张数
    this.init();
}

ShuffFn.prototype.init = function(){
    var that = this;
    var timer = null;
    var i = 0;
    var j = 0;
    var x;
    var list = $(this.listName);
    var len = $(this.itemName).length;
    var wid = parseInt($(this.itemName).css("width"));
    var num = len/this.boxNum; //表示的是按钮的个数,也就是图片分成多少组

    for(var k = 0; k<num; k++){
        $(this.iconBoxName).append("<li></li>")
    }
    $(this.iconLiName).eq(0).addClass("active");
    $(this.iconBoxName).on("click","li",function(){
        i = $(this).index();
        j = $(this).index();

        $(that.iconLiName).eq(j).addClass("active").siblings().removeClass("active");
        x = j*wid*that.boxNum*-1;
        list.stop().animate({"left":x+"px"},that.imgSpeed);
    });
    list.append($(this.itemName).eq(0).clone(true));
    list.append($(this.itemName).eq(1).clone(true));
    list.append($(this.itemName).eq(2).clone(true));
    list.append($(this.itemName).eq(3).clone(true));

    if(this.autoPlayTrue === "true"){
        timer = setInterval(function(){
                autoPlay();
        },that.shuffSpeed);
    }

    $(this.rightBtn).on("click",function(){
        clearInterval(timer);
        rightBtn();
    });
    $(this.leftBtn).on("click",function(){
        clearInterval(timer);
        leftBtn();
    });

    //autoPlay
    function autoPlay(){
        i++;
        j++;
        if(j > num-1){
            j = 0;
        }
        $(that.iconLiName).eq(j).addClass("active").siblings().removeClass("active");

        if(i > num){
            i = 1;
            list.css({"left":"0px"});
        }

        x = i*wid*that.boxNum*-1;
        list.stop().animate({"left":x+"px"},that.imgSpeed);
    }

    //hover event
    if(this.autoPlayTrue === "true"){
        (function hoverFn(){
            $(that.boxName).hover(function(){
                clearInterval(timer);
                timer = null;
            },function(){
                clearInterval(timer);
                timer = setInterval(function(){
                    autoPlay();
                },that.shuffSpeed);
            })
        })()
    }

    //rightBtn
    function rightBtn(){
        autoPlay();
    }

    //leftBtn
    function leftBtn(){
        i--;
        j--;
        if(j < 0){
            j = num-1;
        }

        $(that.iconLiName).eq(j).addClass("active").siblings().removeClass("active");

        console.log(wid*num);
        if(i < 0){
            list.css({"left":-1*wid*len+"px"});
            i = num-1;
        }

        x = i*wid*that.boxNum*-1;
        list.stop().animate({"left":x+"px"},that.imgSpeed);

    }
}

如上，就是所有的代码了，基于此我们可以根据自己的需要设置一次轮播图的张数（this.boxNum = o.boxNum || “2”;）默认是两张。
通过：this.autoPlayTrue 设置是true或者false可以控制轮播图是否自动轮播，默认是true;

我们只要通过

var shuff = new ShuffFn({
        iconBoxName:".js-list-icon",
        iconLiName:".js-list-icon li",
        listName:".js-shuff-list",
        itemName:".js-shuff-list li"
    });

new一个实例就可以很方便的实现轮播图的效果了

notice：存在的问题

目前轮播效果对于三张图片的切换还有点问题