淡入淡出轮播图

//css样式
<style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 560px;
            height: 300px;
            border: 5px solid gray;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .m_unit{
            width: 10000px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .m_unit ul{
            overflow: hidden;
        }

        .m_unit ul li{
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 560px;
            height: 300px;
            display: none;
        }

        .m_unit ul li.current{
            display: block;
        }

        .btn span{
            width: 55px;
            height: 55px;
            background: url('./images/dog/btnL.png');
            position: absolute;
            top: 50%;
            margin-top: -27.5px;
            border-radius: 10px;
        }

        .btn span.right{
            background: url("./images/dog/btnR.png");
            right: 0;
        }

        .circle ul li{
            list-style: none;
            float: left;
            width: 20px;
            height: 20px;
            background: orange;
            margin-right: 10px;
            border-radius: 50%;
        }

        .circle ul{
            overflow: hidden;
        }

        .circle{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .circle ul li.current{
            background: red;
        }
        

    </style>

//html结构
 <div class="box" id="box">
        <div class="m_unit" id="m_unit">
            <ul>
                <li class="current"><a href=""><img src="./images/dog/0.jpg" alt=""></a></li>
                <li><a href=""><img src="./images/dog/1.jpg" alt=""></a></li>
                <li><a href=""><img src="./images/dog/2.jpg" alt=""></a></li>
                <li><a href=""><img src="./images/dog/3.jpg" alt=""></a></li>
                <li><a href=""><img src="./images/dog/4.jpg" alt=""></a></li>
            </ul>
        </div>

        <div class="btn">
            <span class="left" id="leftBtn"></span>
            <span class="right" id="rightBtn"></span>
        </div>

        <div class="circle" id="circle">
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

    </div>

<script>
	//定义标识
	var index = 0;
	//获取所有图片资源
	var $lis = $("#m_unit ul li");
	//定时器自动轮播
	var timer = setInterval(rightHandle,3000);
	//鼠标划入暂停播放
	$("#box").mouseenter(function(){
		clearInterval(timer)
	})
	//鼠标划出开始播放
	$('#box').mouseleave(function(){
		timer=setInterval(rightHandle,3000);
	})
	//点击右按钮
	$('#rightBtn').click(rightHandle);
	function rightHandle(){
		//当前图片隐藏
		$lis.eq(idx).fadeOut(300);
		//索引加一
		index+=1;
		//边界处理
		if(index>$lis.length-1){
			index=0;
		}
		//显示下一章
		$lis.eq(index).fadeIn(300);
		changeCircle();
		
	}
	//点击左按钮
	$('#rightBtn').click(function(){
		$lis.eq(index).fadeOut(300);
		index-=1;
		if(index<0){
			index=$lis.length-1;
		}
		$lis.eq(index).fadeIn(300);
		changeCircle();
	})
	//小圆圈
	function changeCircle(){
		$('#circle ul li').eq(index).addClass('current').siblings().removeClass('current')
	}
</script>