WEB機試題--最大透明度輪播效果

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    ul,ol{
        list-style:none;
    }
    #banner {
        width: 100%;
        height: 500px;
        position: relative;
    }
    #banner > .Lun {
        width: 100%;
        height: 500px;
        overflow: hidden;
    }
    ul{
        width: 100%;
        height: 500px;
    }

    ul.lunBo > li {
        width: 100%;
        height: 500px;
        position: absolute;
        left: 0;
        top: 0;
    }

    ul.lunBo > li:nth-child(1) {
        background: url("images/banner1.jpg") no-repeat center/100% 100%;
        opacity: 1;
    }

    ul.lunBo > li:nth-child(2) {
        background: url("images/banner2.jpg") no-repeat center/100% 100%;
        display: none;
        opacity: 0;
    }

    #banner ul.lunBo > li:nth-child(3) {
        background: url("images/banner3.jpg") no-repeat center/100% 100%;
        display: none;
        opacity: 0;
    }

    ul.lunBo > li:nth-child(4) {
        background: url("images/banner4.jpg") no-repeat center/100% 100%;
        display: none;
        opacity: 0;
    }

    ul.lunBo > li:nth-child(5) {
        background: url("images/banner5.jpg") no-repeat center/100% 100%;
        display: none;
        opacity: 0;
    }

    ul.lunBo > li:nth-child(6) {
        background: url("images/banner6.jpg") no-repeat center/100% 100%;
        display: none;
        opacity: 0;
    }

    ol.circle {
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -120px;
        z-index: 99;
    }

    ol.circle > li {
        cursor: pointer;
        float: left;
        margin: 0 5px;
        color: white;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 15px;
        background-color: #86685e;
    }
    ol.circle > li.Lun_current {
        background-color: #d3161b;
    }
</style>

<!--banner輪播部分-->
<div id="banner">
	<!--輪播圖片部分-->
	<div class="Lun">
		<ul class="lunBo">
			<li></li><li></li>
			<li></li><li></li>
			<li></li><li></li>
		</ul>
		<ol class="circle">
			<li class="Lun_current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ol>
	</div>
</div>

<script src="js/jquery-1.11.3.js"></script>
<script>
    // 最大的透明度輪播圖效果---------------------------------------↓
    (function setBigBannerStyle(document,window,event){
        var index=0;
        var timer=setInterval(autoPlay,3000);
        function autoPlay() {
            //變化大圖
            index++;
            if (index>$("div.Lun>ul.lunBo>li").length-1){
                index=0;
            }
            setAnimate(index);
        }
        //先獲取li的寬高
        var sWidth=$("div.Lun>ul.lunBo>li").width();
        var sHeight=$("div.Lun>ul.lunBo>li").height();
        //滑鼠移入移暫停與開始 並且把li變大變小
        $("div.Lun").hover(function () {
            clearInterval(timer);
            console.log(2);
            //放大
            $("div.Lun>ul.lunBo>li").stop().animate({
                width:sWidth*1.1,
                height:sHeight*1.1,
                marginLeft:-sWidth*0.05,
                marginTop:-sHeight*0.05
            },2000)
        },function () {
            timer=setInterval(autoPlay,3000)
            //縮小
            $("div.Lun>ul.lunBo>li").stop().animate({
                width:sWidth,
                height: sHeight,
                marginLeft:0,
                marginTop:0
            },2000)
        });
        //小圓點 滑鼠點選事件
        $("div.Lun>ol.circle>li").click(function () {
            console.log(1);
            index=$(this).index();
            setAnimate(index);
        });
        function setAnimate(index) {
            $("div.Lun>ul.lunBo>li").eq(index).show()
                .stop().animate({
                opacity:1
            },2000)
                .siblings().stop().animate({
                opacity:0
            },2000,function () {
                $(this).css("display","none");
            });
            //變化小圓點
            $("div.Lun>ol.circle>li").eq(index).addClass("Lun_current")
                .siblings().removeClass("Lun_current")
        }
    })(document,window,event)

    // 最大的透明度輪播圖效果---------------------------------------↑
</script>