轮播图的实现

在教学过程中，实现了好几个版本的轮播图，有纯css实现的，有JavaScript实现的，但多少对其的控制不强，或者功能性不够多，接下来的这个实例，是使用js实现的（jQuery），功能上还是比较完善的。由于这个代码力在写成一个封装好了的组件形式，所以以后用的话，直接拷贝就可以使用。
这篇文章，重在讲述实现的原理。

第一次更新：先上代码，以后有时间再来描述

html代码:

<!-- 轮播组件 -->
    <div class="swape_box">
        <div class="imgs">
            <div class="img">
                <a href="#">
                    <img src="images/1.jpg" alt="1">
                </a>
            </div>
            <div class="img">
                <a href="#">
                    <img src="images/2.jpg" alt="2">
                </a>
            </div>
            <div class="img">
                <a href="javascript:void(0);">
                    <img src="images/3.jpg" alt="3">
                </a>
            </div>
            <div class="img">
                <a href="javascript:void(0);">
                    <img src="images/4.jpg" alt="4">
                </a>
            </div>
        </div>
        <div class="left btn">&lt;</div>
        <div class="right btn">&gt;</div>
        <div class="circles">
        </div>
    </div><!-- end 轮播组件 -->

js代码:

/**
 * Created by xxh on 2017/8/4.
 */


function KingSwape(paramObj) {
    $('.btn').hide();
    $('.swape_box').hover(function () {
        $('.btn').show();
        clearInterval(timer);
    }, function () {
        $('.btn').hide();
        timeInterval();
    });

    var swape_box_width = $('.swape_box').width(); // 获取整个轮播容器的宽高
    var swape_box_height = $('.swape_box').height();
    var pos = 0;
    var width = swape_box_width;
    $('.swape_box img').width(width);
    var img_first = $('.img:first').clone();
    $('.swape_box .imgs').append(img_first);
    var img_cnt = $('.img').size();
    for(var i=0; i < img_cnt - 1; i++) {
        var circle = '<div class="circle" data-rel="'+i +'"></div>';
        $('.swape_box .circles').append(circle);
    }

    showCircle();

    timeInterval();
    function timeInterval() {
        timer = setInterval(function () {
            pos--;
            move();
        }, paramObj.time);
    }

    function move() {
        if(pos == -img_cnt) {
            pos = -1;
            $('.imgs').css({left: 0});
        }
        else if(pos == 1) {
            pos = -img_cnt + 2;
            $('.imgs').css({left: (pos-1)*width});
        }

        $('.imgs').animate({left: pos*width},500);
        showCircle();
    }

    function showCircle() {
        var idx = -pos;
        if(idx == img_cnt - 1)
            idx = 0;
        var circles = $('.circle');
        $(circles).removeClass('active');
        var circle = circles[idx];
        $(circle).addClass('active');
    }
    $('.left').click(function () {
        pos--;
        move();
    });

    $('.right').click(function () {
        pos++;
        move();
    });

    $('.circle').click(function () {
        pos = $(this).attr('data-rel');
        $('.imgs').animate({left: -pos*width},500);
        pos=-pos;
        showCircle();
        //$('.imgs').css({left: -pos*width});

    });
}

css代码：

.swape_box * {
    padding: 0;
    margin: 0;
}
.swape_box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.imgs {
    width: 50000px;
    overflow: hidden;
    position: absolute;
    /*z-index: -1;*/
    height: 100%;
}
.img {
    float: left;
    height: 100%;
}
.img img {
    height: 100%;
}
.btn {
    background-color: white;
    z-index: 9;
    display: inline-block;
    background-color: rgba(121, 121, 121, 0.47);
    position: absolute;
    top: 40%;
    color: white;
    font-weight: bolder;
    font-size: 1.5em;
    padding: 0 5px;
}
.right {
    right: 0;
}
.circles {
    width: 100%;
    position: absolute;
    bottom: 2px;
    text-align: center;
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: solid 1px green;
    background-color: white;
    display: inline-block;
    margin: 0 3px;
    opacity: 0.5;
}
.circle:hover {
    cursor: pointer;
}
.active {
    background-color: green;
}