jq-フェードアウトベースのマルチキャスト

    

        
![](img/1.jpg)
        
![](img/2.jpg)
        
![](img/3.jpg)
        
![](img/4.jpg)
        
![](img/5.jpg)
    
    

        
1
        
2
        
3
        
4
        
5
    
    
    

 *{ padding:0; margin:0; list-style:none; border:0;}
        .all{ width:992px; height:420px; background:yellow; margin:100px auto; position:relative; overflow:hidden;}
        .all ul{ position:relative; z-index:1;}
        .all ul li{ position:absolute; left:0; top:0;}
        .all ul .current{ z-index:10;}
        .all ol{ position:absolute; bottom:10px; right:10px; z-index:2;}
        .all ol li{ width:30px; height:20px; border:1px solid #ccc; float:left; line-height:20px; text-align:center; color:#000; margin-left:10px; cursor:pointer;}
        .all ol .current{ background:#f60;}
        .all span{ width:40px; height:70px; background:url(img/arr.png) 0 0; position:absolute; left:0; top:50%; margin-top:-35px; z-index:11; cursor:pointer;display:none; }
        .all:hover span{display:block;opacity:0.5;}
        .all span:hover{opacity:1;}
        .all .right{ left:auto; right:0; background-position:right 0;}

 $(function(){
        var mytop=100;
        var num=0;
        var speed=1000;
        var timer=null;
        var $Img=$(".all ul li");
        var $tab=$(".all ol li");
        var $prev=$(".all .left");
        var $next=$(".all .right");
        //tab 
        $tab.click(function(){
            mytop++;
            $(this).addClass("current").siblings().removeClass("current");
            var index=$(this).index();
            $Img.eq(index).css("zIndex",mytop).hide().fadeIn(speed);
            num=index;

        })
        // 

        $next.click(function(){
            num++;
            mytop++;
            if(num>=$Img.length){num=0}
            fnCom();
        });
        // 
        $prev.click(function(){
            num--;
            mytop++;
            if(num<0){num=$Img.length-1}
            fnCom();
        })
        // 
        timer=setInterval(autoPlay,2000);
        function autoPlay(){
            mytop++;
            num++;
           num%=$Img.length;
            fnCom();
        }
        function fnCom(){
            $Img.eq(num).css("zIndex",mytop).hide().fadeIn(speed);
            $tab.eq(num).addClass("current").siblings().removeClass("current")
        }
        // 
        $(".all").hover(function(){
            clearInterval(timer)
        },function(){
          clearInterval(timer);
            timer=setInterval(autoPlay,2000)
        })


    })