图片轮播

  思路：1.点击左右按钮移动图片，图片宽度一个视口宽度，

             2.让图片做到无限循环，即在跳转到缓冲图是将其定位在其原图的位置

             3.实现滑动，指定每次滑动距离，setinterva，在达到目的时clearinterval；

4.实现小按钮点击时与图片的位置挂钩；

  <!-- banner -->

    <div class="banner-wrap">
        <div id="content">                         ／／图片轮播时取两端的图片交换放在两端作为缓冲图
            <img src="imgs/banner2.jpg">
            <img src="imgs/banner.jpg">
            <img src="imgs/banner1.jpg">
            <img src="imgs/banner2.jpg">
            <img src="imgs/banner.jpg">
        </div>                             
        <div class="point">
            <a href="javascript:" style="background: red;"></a>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
        </div>
        <div class="icons">
            <i class="back" id="back"></i>
            <i class="go" id="go"></i>
        </div>

    </div>

.banner-wrap {
        overflow: hidden;
        position: relative;
    }
    #content {
        left: -100%;     ／／由于图片是撑满整个屏的，这里用100%做单位，有利于缩放；
        position: relative;
        font-size: 0;
        white-space: nowrap;
    }
.banner-wrap .point {
    position: absolute;
    width: 100px;
    height: 20px;
    bottom: 20px;
    right: 50px;
}


.banner-wrap .point a {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 10px;
    border-radius: 50%;
    background: #000;
}


.banner-wrap .back {
    display: inline-block;
    height: 30px;
    width: 30px;
    background: url(../imgs/back.png);
    background-size: 100% 100%;
}


.banner-wrap .go{
    display: inline-block;
    height: 30px;
    width: 30px;
    background: url(../imgs/go.png);
    background-size: 100% 100%;
    right: 0;
}
.banner-wrap .icons i{
    position: absolute;
    bottom: 50%;
}

    $(".banner-wrap i").click(function() {                                       ／／左右箭头点击时
        if ($("#content").attr("data-state") === "doing") return;       ／／判断是否在跳转中，如果在跳转中直接return掉
        var _id = $(this).attr("id");                       
        move(_id);
        redpoint(_id);
    });


    point.click(function() {
        var screenW = $(window).width(),
            currentLeft = parseFloat($("#content").css("left")) / screenW,
            imageindex = -1 * currentLeft - 1,
            _index = $(this).index();


        point.siblings().css("background", "#000");
        $(this).css("background", "red");


        if (_index > imageindex) {
            goal(-1);
        }
        if (_index < imageindex) {
            goal(1);
        }


        function goal(val) {
            var _times = 0;
            var change = setInterval(function() {
                var _currentLeft = parseFloat($("#content").css("left")) / screenW,   ／／content的left值／视口宽度，始终是一个负数
                    imageindex = -1 * currentLeft - 1,         ／／即当前显示的image的index
                    step = 0.1;                                            ／／设置每次移动距离
                $("#content").css("left", (_currentLeft + val * step) * 100 + "%"); ／／重新赋值给left
                _times += 1;
                // if (_times = Math.abs(_index-imageindex)*10) {
                //     clearInterval(change);
                // }
            }, 100);
        }
    });


    function redpoint(_id) {
        var screenW = $(window).width(),
            currentLeft = parseFloat($("#content").css("left")) / screenW,
            index = -1 * currentLeft - 1;
        //判断运动方向并且执行
        if (_id == "go") {
            index += 1;
            if (index > 2) {   ／／判断图片位置，跳转到原图
                index = 0;
            }


            point.siblings().css("background", "#000");
            point.eq(index).css("background", "red");
        } else {
            index -= 1;
            if (index < 0) {
                index = 2;
            }
            point.siblings().css("background", "#000");
            point.eq(index).css("background", "red");
        }
    }


    function move(_id) {
        var times = 0,
            screenW = $(window).width();
        $("#content").attr("data-state", "doing"); ／／打上标签
        var roll = setInterval(function() {
            currentLeft = parseFloat($("#content").css("left")) / screenW;


            //判断运动方向并且执行
            if (_id == "go") {
                $("#content").css("left", (currentLeft - 0.1) * 100 + "%");
            } else {
                $("#content").css("left", (currentLeft + 0.1) * 100 + "%");
            }


            //清除计时器
            times += 1;
            if (times === 10) {
                clearInterval(roll);
                $("#content").removeAttr("data-state");
                // 判断无限循环
                newCurrentLeft = Math.round(parseFloat($("#content").css("left")) / screenW);
                if (newCurrentLeft > -1) {
                    $("#content").css("left", "-300%");
                } else if (newCurrentLeft < -3) {
                    $("#content").css("left", "-100%")
                }
            }


        }, 100);

    }

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


<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <link rel="stylesheet" type="text/css" href="css/simple-cube.min.css">
    <style type="text/css">
    .nav-wrap {
        position: relative;
        overflow: hidden;
    }
    
    #content {
        white-space: nowrap;
        font-size: 0;
        position: relative;
        left: -100%;
    }
    
    .point {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
    
    .point a {
        display: inline-block;
        height: 10px;
        width: 10px;
        background: #000;
        margin: 0 10px;
        border-radius: 50%;
    }
    
    #on {
        background: red;
    }
    
    .nav-wrap i {
        display: inline-block;
        position: absolute;
        bottom: 50%;
    }
    
    #go {
        width: 40px;
        height: 40px;
        background: url(imgs/right.png);
        background-size: 100% 100%;
        right: 0;
    }
    
    #back {
        width: 40px;
        height: 40px;
        background: url(imgs/left.png);
        background-size: 100% 100%;
    }
    </style>
</head>


<body>
    <div class="nav-wrap">
        <div id="content">
            <img src="imgs/banner2.jpg">
            <img src="imgs/banner.jpg">
            <img src="imgs/banner1.jpg">
            <img src="imgs/banner2.jpg">
            <img src="imgs/banner.jpg">
        </div>
        <div class="point">
            <a href="javascript:"></a>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
        </div>
        <i id="back"></i>
        <i id="go"></i>
    </div>
    <script type="text/javascript" src="js/jQuery2.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".point a").eq(0).css("background", "red");
        $("i").click(function() {
                if ($("#go").attr("type") == "doing") return;
                var _id = $(this).attr("id");
                move(_id);
                change();
                btnchange(_id);
            })
            // 图片移动
        function move(_id) {
            var time = 0
            $("#go").attr("type", "doing");
            var a = setInterval(function() {
                var screenW = $(window).width(),
                    currentLeft = parseFloat($("#content").css("left")) / screenW,
                    step = 0.1;
                if (_id == "go") {
                    $("#content").css("left", (currentLeft - step) * 100 + "%");
                } else {
                    $("#content").css("left", (currentLeft + step) * 100 + "%");
                }
                time += 1;
                if (time == 10) {
                    clearInterval(a);
                    $("#go").removeAttr("type");
                }
            }, 100);
        }
        // 图片轮播
        function change() {
            var screenW = $(window).width(),
                currentLeft = Math.round(parseFloat($("#content").css("left")) / screenW);
            if (currentLeft > -1) {
                $("#content").css("left", "-300%");


            } else if (currentLeft < -3) {
                $("#content").css("left", "-100%");


            }
        }


        // 按钮变换
        $(".point a").click(function() {
            var index = $(this).index();
            var screenW = $(window).width(),
                currentLeft = parseFloat($("#content").css("left")) / screenW,
                imageindex = -currentLeft - 1;
            $(this).css("background", "red");
            $(this).siblings().css("background", "#000");
            $("#content").css("left", (currentLeft - (index - imageindex)) * 100 + "%");


        })


        function btnchange(_id) {
        var screenW = $(window).width(),
                    currentLeft = Math.round(parseFloat($("#content").css("left"))) / screenW,
                    imageindex = -currentLeft - 1;
            if (_id == "go") {
                imageindex += 1;
                if (imageindex > 2 ) {
                imageindex = 0;
                }
                 $(".point a").eq(imageindex).css("background","red");
                 $(".point a").eq(imageindex).siblings().css("background","#000");
            }
        else if(_id == "back"){
        imageindex -= 1;
        if (imageindex < 0 ) {
                imageindex = 2;
                }
                $(".point a").eq(imageindex).css("background","red");
                $(".point a").eq(imageindex).siblings().css("background","#000");
        }
}


    })
    </script>
</body>


</html>