初学JQ之轮播图

刚开始学习JQ，试着自己写了一个轮播图。
HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播效果图</title>
    <script type="text/javascript" src='jquery-3.1.1.min.js'></script>
<body>
  <div id="banner">
    <ul>
      <li><a href="跳转的地址" target="_blank"></a></li>
      <li><a href="跳转的地址" target="_blank"></a></li>
      <li><a href="跳转的地址" target="_blank"></a></li>
    </ul>
    <span class="b-btn left"><</span>
    <span class="b-btn right">></span>
  </div>
</body>
</html>

CSS部分

                *{margin: 0;padding: 0;}
        #banner{
                margin: 0 auto;
                background: #ebebeb;
                width: 600px;
                height: 300px;
        }
        #banner ul{
                    position: absolute;
                    width: 600px;
                    height: 300px;
                    overflow: hidden;
        }
        #banner li{
                    display: none;
        }
        #banner img{
                    width: 600px;
                    height: 300px;
        }
        #banner .b-btn{
                    display: inline-block;
                    height: 300px;
                    width: 100px;
                    font: 70px/300px '微软雅黑';
                    text-align: center;
                    color: #8B7B8B;
                    opacity: 0.2;
                    /*防止双击的时候出现蓝底*/
                    -webkit-user-select:none; 
                    -moz-user-select:none; 
                    -ms-user-select:none; 
                    user-select:none;
        }
        #banner .b-btn:hover{
                            background: #cdc1c5;
                            color: #f8f8ff;
                            opacity: 0.5;
                            cursor: pointer;
        }
        #banner .right{
                      float: right;
        }

JS部分

var time;
var num=$('#banner li').length;
var b_num=1;

//初始设置显示第一张轮播图
$('#banner li').eq(0).show();
//轮播图自动切换
function bannerMove(){
    time=setInterval(function(){
    //轮播图淡入淡出
    $('#banner li').eq(b_num%num).fadeIn(500).siblings('li').fadeOut(200);
        b_num++;
    },3000)
};
bannerMove();//开始自动轮播

//鼠标移入图片和左右按钮时停止自动播放
$('#banner li,#banner .right,#banner .left').mouseover(function(){
    clearInterval(time)
});

//鼠标移出图片和左右按钮时开始自动播放
$('#banner li,#banner .right,#banner .left').mouseout(function(){
    bannerMove()
});

//点击右键切换图片
$('#banner .right').click(function(){
    $('#banner li').eq(b_num%num).fadeIn(500).siblings('li').fadeOut(200);
    b_num++;
})
//点击左键切换图片
$('#banner .left').click(function(){
    if (b_num%num==0) {
        b_num=3;
    }
    $('#banner li').eq(b_num-2%num).fadeIn(500).siblings('li').fadeOut(200);
    b_num--;
});

希望大家能够多多指出错误和不够完善的地方，谢谢。

初学JQ之轮播图

推荐阅读更多精彩内容