透明度轮播

html:

<div class="wrapper"><!-- 最外层部分 -->
    <div class="banner"><!-- 轮播部分 -->
        <ul class="imgList"><!-- 图片部分 -->
            <li class="imgOn"><a href="#"><img src="img/banner1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
            <li><a href="#"><img src="img/bankpic.png" width="400px" height="200px" alt="puss in boots2"></a></li>
            <li><a href="#"><img src="img/banner2.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
            <li><a href="#"><img src="img/banner3.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
        </ul>
        <div class="bg"></div> <!-- 图片底部背景层部分-->

        <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>

css:

.wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
.banner{width: 400px;height: 200px;overflow: hidden;}
.imgList{width:400px;height:200px;z-index: 10;}
.imgList li{display: none;}
.imgList .imgOn{display: inline;}
.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
.indexList .indexOn{background: red;font-weight: bold;color: white;}

js:

<script>
    var curIndex = 0; //当前index
    //  alert(imgLen);
    // 定时器自动变换2.5秒每次
    var autoChange = setInterval(function(){
        if(curIndex < $(".imgList li").length-1){
            curIndex ++;
        }else{
            curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex);
    },3500);

    $(".indexList").find("li").each(function(item){
        $(this).hover(function(){
            clearInterval(autoChange);
            changeTo(item);
            curIndex = item;
        },function(){
            autoChange = setInterval(function(){
                if(curIndex < $(".imgList li").length-1){
                    curIndex ++;
                }else{
                    curIndex = 0;
                }
                //调用变换处理函数
                changeTo(curIndex);
            },3500);
        });
    });
    function changeTo(num){
        $(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
    }

</script>