自定义轮播

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="jquery.myslider.css">
    <style>
        .slider2 {
            width: 640px;
            height: 320px;
            margin: 20px auto;
            position: relative;
        }

        .slider ul li{
            width: 10px;
            height: 10px;
            background: #666;
            border: none;
            opacity: 0.3;
        }

        .slider ul li.active{
            background: #666;
            opacity: 1;
        }
    </style>
</head>

<body>

    <div class="slider">
        <div class="pics">
            <div class="item active">
                <img src="../images/l1.jpg" alt="">
            </div>
            <div class="item">
                <img src="../images/l2.jpg" alt="">
            </div>
            <div class="item">
                <img src="../images/l3.jpg" alt="">
            </div>
        </div>

        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>

        <span class="arrow left"></span>
        <span class="arrow right"></span>
    </div>

    <hr>


    <div class="slider2">
        <div class="pics">
            <div class="item active">
                <img src="../images/01.jpg" alt="">
            </div>
            <div class="item">
                <img src="../images/02.jpg" alt="">
            </div>
            <div class="item">
                <img src="../images/03.jpg" alt="">
            </div>
            <div class="item">
                <img src="../images/04.jpg" alt="">
            </div>
            <div class="item">
                <img src="../images/05.jpg" alt="">
            </div>
        </div>

        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <span class="arrow left"></span>
        <span class="arrow right"></span>
    </div>



    <script src="../lib/jquery-2.0.3.js"></script>
    <script src="jquery.myslider.js"></script>
    <script>
        $(function () {
            // 一般插件不传递参数就是最简调用方式，保证基本功能即可
            // $(".slider").slider();
            $(".slider").slider({
                interval: 2000,
                dots: true,
                arrow: true
            });

            $(".slider2").slider({
                dots: true
            });
        });
    </script>
</body>

</html>

js代码：

(function ($) {
    $.fn.extend({
        slider: function (options) {
            var that = this;
            var defaults = {
                interval: 3000,
                dots: false,
                arrow: false
            };

            options = $.extend(defaults, options);

            // 自动轮播
            // var interval = 3000;
            var curIndex = 0;
            var divs = this.find(".item");
            var size = divs.length;

            var t = setInterval(function () {
                next();
            }, options.interval);


            if (options.dots) {
                this.find("ul").show();
                // 为页面中的控制点绑定事件
                this.find("li").click(function () {
                    divs.eq($(this).index()).addClass("active").siblings().removeClass("active");
                    $(this).addClass("active").siblings().removeClass("active");
                    curIndex = $(this).index();
                });
            } else {
                this.find("ul").hide();
            }

            if (options.arrow) {
                this.find(".arrow").show();
                // 为页面中的左右箭头绑定事件
                this.find(".left").click(function() {
                    prev();
                });

                this.find(".right").click(function() {
                    next();
                });
            } else {
                this.find(".arrow").hide();
            }

            // 为this(轮播容器)绑定悬停事件
            this.hover(function () {
                clearInterval(t);
            }, function () {
                t = setInterval(function () {
                    next();
                }, options.interval);
            });

            function next() {
                curIndex++;
                if (curIndex == size) {
                    curIndex = 0;
                }
                divs.eq(curIndex).addClass("active").siblings().removeClass("active");
                if (options.dots) {
                    that.find("li").eq(curIndex).addClass("active").siblings().removeClass("active");
                }

            }

            function prev() {
                curIndex--;
                if (curIndex == -1) {
                    curIndex = size - 1;
                }
                divs.eq(curIndex).addClass("active").siblings().removeClass("active");
                if (options.dots) {
                    that.find("li").eq(curIndex).addClass("active").siblings().removeClass("active");
                }
            }
        }
    });
})(jQuery);

css代码：

*{
    margin: 0;
    padding: 0;
}

.slider{
    width: 590px;
    height: 470px;
    margin: 20px auto;
    position: relative;
}

.item{
    display: none;
}

.item.active{
    display: block;
}


ul{
    position: absolute;
    bottom: 10px;
    list-style: none;
    left: 50%;
    transform: translateX(-50%);
}

ul li{
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 16px;
    border: 1px solid #fff;
}

ul li.active {
    background: #fff;
}

.arrow{
    display: inline-block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.left{
    background: url(../images/arrow-left.png);
    left: 0px;
}

.right{
    background: url(../images/arrow-right.png);
    right: 0px;
}

猜你喜欢