<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8">
    <title>JQ轮播图</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .box {
            width: 400px;
            height: 710px;
            border: 1px solid black;
            margin: 10px auto;
            overflow: hidden;
            /*background-image: url("img/4.jpg");*/
            position: relative;
        }
        .btn li {
            position: absolute;
            width: 50px;
            height: 50px;
            font-size: 40px;
            top: 50%;
            line-height: 50px;
            transform: translateX(-25);
            text-align: center;
            cursor: pointer;
        }
        .btn li:hover{
            color: #cc0000;
        }
        .btn .left{
            left: 0;
        }
        .btn .right{
            right: 0;
        }
        .tan {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
        }
        .tan li{
            float: left;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: orange;
            margin : 15px;
            cursor: pointer;
        }
        .tan li :hover{
            border: 1px solid red;
        }
        .tan li.on{
            background-color: red;
        }

    </style>
</head>
<body>
<div class="box">
<!-- 图片部分-->
    <ul class="img">
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
    </ul>

<!-- 箭头部分-->
    <ul class="btn">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>

<!--圆点部分-->
    <ul class="tan">
        <li></li>
        <li></li>
        <li></li>
        <li></li>

    </ul>
</div>


<script type="text/javascript">

    //选择元素
    img_li = $('.img li')
    btn_li = $('.btn li')
    tan_li = $('.tan li')

    //初始化
    // btn_li.hide()
    tan_li.eq(1).attr('class','on')
    img_li.hide().eq(0).show()

    //变量初始化
    len = img_li.length
    n = 0
    var timer;


    //圆点选播
    tan_li.click(function () {
        x = $(this).index()
        if(x !== n){
            func(x)
        }
    })

    //鼠标移入移出
    $('.box').hover(function () {
        btn_li.show()
        clearInterval(timer)
    },function () {
        btn_li.hide()
        auto()
    })



    //箭头点播
    btn_li.click(function () {
        x = n;
        if ($(this).index()){
            x += 1;
            x %= len
        }else {
            x -= 1;
            if(x<0){
                x = len - 1
            }
        }
        func(x)
    })


    //自动轮播
    function auto() {
        timer = setInterval(function () {
            x = n;
            x++;
            x %= len;
            func(x)
        },3000)
    }


    //函数部分
    function func(i) {
        tan_li.eq(n).removeClass('on');
        img_li.eq(n).fadeOut(2000);
        n = i;
        tan_li.eq(n).attr('class','on')
        img_li.eq(n).fadeIn();
    }


</script>
<script src="Jquery/jquery.js"></script>
</body>
</html>