JQ轮播小demo

无图片，直接cytl+v。方便直接了解，轮播图原理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
    <style>
        *{margin: 0;padding:0;}
        li{list-style-type: none;}
        .box{ width: 500px;height: 300px;position: relative; }
        .charset{ height: 300px;width: 100%; position: relative;}
        .charset li{  height: 300px;position: absolute;top:0;left: 0;width: 100%;display: none;}
        .but{position: absolute;top: 30%; width:60px;height: 100px;background-color: red; }
        .pre{left: 0px;}
        .net{right: 0px;}
        .num{text-align: center; position: absolute;left: 0; bottom: 0px;width: 100%;z-index: 5 }
        .num li{width: 10px;height: 10px;background-color: #fff;border-radius: 50%;display: inline-block;margin: 0 5px;}
        .num .on{background-color: blue}
        .nut{ position: absolute;left: 0; bottom: 0px;width: 100%;height: 30px; z-index: 10;background:red;}
        .nut li{color: #fff;display: inline-block;}
    </style>
</head>
<body>
    <div class="box">
        <ul class="charset">
            <li style="background-color:red"></li>
            <li style="background-color:black"></li>
            <li style="background-color:#aaa"></li>
        </ul>
        <div class="but pre"></div>
        <div class="but net"></div>
        <ul class="num">
            
        </ul>
        <ul class="nut">
            <li class="out">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        $(function(){
            var len=$('.charset li').length
            for (var i=0;i<len;i++){ 
                $('.num').append("<li></li>");
                $('.num li').first().addClass('on');
            
            }

            $('.num li').mouseover(function() {
                var index = $(this).index();
                $(this).addClass('on').siblings().removeClass('on');
                $('.nut li').addClass('out').siblings().removeClass('out');
                $('.charset li').eq(index).siblings().fadeIn().fadeOut();
            })
            var i=0;
            function net(){
                i++
                if (i>len) {
                    i=0;
                }
                $('.charset li').eq(i).fadeIn().siblings().fadeOut();
                $('.nut li').eq(i).addClass('out').siblings().removeClass('out');
                $('.num li').eq(i).addClass('on').siblings().removeClass('on');
            }
            function pre(){
                i--
                if (i<0) {
                    i=len;
                }
                $('.charset li').eq(i).fadeIn().siblings().fadeOut();
                $('.nut li').eq(i).addClass('out').siblings().removeClass('out');
                $('.num li').eq(i).addClass('on').siblings().removeClass('on');
            }
            $('.pre').click(function(){
                pre();
            });
            $('.net').click(function(){
                net();
            });
            var time = setInterval(net,2000)
            $('.charset').hover(function(){
                clearInterval(time);
            },function(){
                time = setInterval(net,2000);
            })
        })
        
    </script>
</body>
</html>