原生js+jquery实现轮播图+思路详解（超简单）

序言：
现在有很多方法可以写一个轮播图，框架，css3 ，bootstarp等都可以做出一个漂亮的轮播图，为了提高js能力 现在用原生js和jq各写一个轮播图。
思路详解：

• 先实现轮播图可以自左到右轮播，轮播到最后一张图时，反向轮播，转移至反复循环。
• 可以用左右键来控制图片轮播的方向。
• 点击下方的小按钮来选择某张图片

HTML部分：

<div class="box">
    <div class="arr">
        <span title="1" class="left"><</span>
        <span title="0" class="right" style="float: right">></span>
    </div>

    <ul class="ul_img">
        <li class="li_img"><img src="images/01.jpg" alt=""></li>
        <li class="li_img"><img src="images/02.jpg" alt=""></li>
        <li class="li_img"><img src="images/03.jpg" alt=""></li>
        <li class="li_img"><img src="images/04.jpg" alt=""></li>
    </ul>
    <ul class="ul_cat">
        <li class="li_cat"></li>
        <li class="li_cat"></li>
        <li class="li_cat"></li>
        <li class="li_cat"></li>
    </ul>
</div>
</body>

CSS部分：

<style>
        *{
            margin: 0;
            padding:0;
            list-style: none;
            text-decoration: none;
        }
        img {
            width: 100%;
        }

        .li_img {
            width: 800px;
            float: left;
            list-style: none;
        }

        .ul_img {
            width: 6000px;
            padding: 0px;
            margin: 0px;
            transition: all 2s;
        }

        .box {
            width: 800px;
            overflow: hidden;
            position: relative;
            top: 100px;
            left: 350px;
        }

        .arr {
            z-index: 9999;
            position: absolute;
            padding-top: 230px;
            width: 800px;
        }

        .arr span {
            font-size: 3em;
            color: seashell;
        }

        .arr span:hover {
            cursor: pointer;
            background-color: rgba(192, 192, 192, 0.29);
        }

        .ul_cat  {
            width: 250px;
            height: 25px;
            border-radius: 20px;
            background-color:rgba(255,255,255,0.5);
            position: absolute;
            left: 35%;
            bottom: 10%;
        }
        .li_cat{
            width: 12px;
            height: 12px;
            margin-top:5px;
            background-color: #fff;
            border-radius: 50%;
            margin-left: 40px;
            float: left;
        }
        .li_cat:hover {
            background-color: aqua;

        }
    </style>

JS部分：

<script>
    //设置count来显示当前图片的序号
    var count = 0;
    //动画的执行方向
    var stargo = false;
    //计时器对象
    var timer;
    window.onload = function () {
        //获取各个元素
        var ul_img = document.getElementsByClassName("ul_img")[0];
        var li_img = document.getElementsByClassName("li_img");
        var arr = document.getElementsByClassName("arr");
        var li_cat = document.getElementsByClassName("li_cat");
        li_cat[0].style.backgroundColor = "aqua";
        //这是定时器
        showtime();
        function showtime() {
            timer = setInterval(function () {
                if (stargo == false) {
                    count++;
                    ul_img.style.transform = "translate(" + -800 * count +"px)";
                    if (count >= li_img.length - 1) {
                        count = li_img.length - 1;
                        stargo = true;
                    }
                }
                else {
                    count--;
                    ul_img.style.transform = "translate(" + -800 * count + "px)";
                    if (count <= 0) {
                        count = 0;
                        stargo = false;
                    }
                }

                for (var i = 0; i < li_cat.length; i++) {
                    li_cat[i].style.backgroundColor = "#fff";
                }

                li_cat[count].style.backgroundColor = "aqua";

            }, 1000)
        }
        //这是左右点击
        for (var i = 0; i < arr.length; i++) {
            arr[i].onmouseover = function () {
                clearInterval(timer);
            }
            arr[i].onmouseout = function () {
                showtime();
            }
            arr[i].onclick = function () {
                if (this.title == 0) {
                    count++;
                    if (count > 3) {
                        count = 0;
                    }
                }
                else {
                    count--;
                    if (count < 0) {
                        count = 3;
                    }
                }

                ul_img.style.transform = "translate(" + -800 * count + "px)";

                for (var i = 0; i < li_cat.length; i++) {
                    li_cat[i].style.backgroundColor = "#fff";
                }
                li_cat[count].style.backgroundColor = "aqua";
            }
        }
        //鼠标onmousever事件
        for (var b = 0; b < li_cat.length; b++) {
            li_cat[b].index = b;
            li_cat[b].onmouseover = function () {
                clearInterval(timer);
                //让count值对应
                //为了控制方向
                if (this.index == 3) {
                    stargo = true;
                }
                if (this.index == 0) {
                    stargo = false;
                }
                count = this.index;
                ul_img.style.transform = "translate(" + -800 * this.index + "px)";
                for (var a = 0; a < li_cat.length; a++) {
                    li_cat[a].style.backgroundColor = "#fff";
                }
                li_cat[this.index].style.backgroundColor = "aqua";
            }
            li_cat[b].onmouseout = function () {
                //添加计时器
                showtime();
            }
        }
    }
</script>

最后jq的原理和js是一样的：
JQ部分：

<script>
    var count=0;
    var timer;
    function showtime() {
        timer=setInterval(function () {
            show();
            count++;
            if(count==4){
                count=0;
            }
        },2000)
    }
    function show() {
        $('.li_img').eq(count).stop().fadeIn(1000).siblings('.li_img').fadeOut(1000);
    }
    $(document).ready(function () {
        showtime();
        $('.li_cat').hover(function(){
            //获取当前i的值，并显示，同时还要清除定时器
            count = $(this).index();
            show();
            clearInterval(timer);
        },function(){
            //
            showtime();
        });

        //鼠标点击左侧的箭头
        $('.arr').click(function(){
            clearInterval(timer);
            if(count == 0){
                count = 4;//注意此时i的值
            }
            count--;
            show();
            showtime();
        });

        //鼠标点击右侧的箭头
        $('.arr').click(function(){
            clearInterval(timer);
            if(count == 4){
                count = -1;//注意此时i的值
            }
            count++;
            show();
            showtime();
        });
    })
</script>
``