jQueryで作成した画像のスライド効果



<html>  
    <head>  
        <style>
            div#MainPromotionBanner{
                width:490px;
                height:240px;
                background:#f4ffe7;
                overflow:hidden;
                position:relative;
            }
            div#MainPromotionBanner .sliderContent div{
                width:490px;
                height:240px;
                overflow:hidden;
                margin:0 0 0 0;
                padding:0 0 0 0;
                border-width:0;
            }
        </style>
        <script type="text/javascript" src="jquery-1.3.1.min.js"></script>  
        <script type="text/javascript">
            
jQuery.fn.mbSlider ={
	width:0,
	height:0,
	//     
    trigerCss : {
    	width:16, height:16, 
    	'background-color':'#FFFFFF', 'margin':'2 5 2 5', 
    	'float':'left', 'text-align':'center',
    	'font-size':'100%', 'color':'#74A8ED',
    	'border-style': 'solid', 'border-width':1,
    	'border-color':'#74A8ED'},
    //       
    trigerCss02 : {
    	width:20, height:20, 'margin-top':4,
    	'background-color':'#74A8ED','border-color':'#CCDEF7',
    	'font-size':'150%', 'color':'#FFFFFF'},
    //      DIV    
    trigerDivCss : {
    	position: 'absolute', left:50,
    	'height':22,'vertical-align':'middle'}
};
jQuery.fn.initMbSlider = function (width, height){  
    var container = this;
    container.mbSlider.width = width;
    container.mbSlider.height = height;
    //               
    $('.sliderContent',container).css({position: 'relative'}).hover(
    	function(){
    		$(container).attr('state', 'stop');
    	}, function(){
    		$(container).attr('state', 'start');
    	}
    );  
	container.mbSlider.wwidth=width;
    counts = $('div', $('.sliderContent',container)).length;
    $('.sliderContent',container).append($(document.createElement('div')).html($($('.sliderContent',container)[0]).html()));
    //        DIV
    var trigerDiv = $(document.createElement('div')).css(container.mbSlider.trigerDivCss).css({top:height-30}).addClass('trigerDiv');  
    var i = 0;  
    
    //             
    for(i = 0; i < counts; i++){  
        var title = $($('div img', $('.sliderContent',container))[i]).attr('alt');  
        trigerDiv.append(  
            $(document.createElement('div')).css({margin:'5px'}).css(container.mbSlider.trigerCss).attr('num',i)
            	.attr('alt',title).attr('title',title).append(i+1).hover(function(){  
            		
	                $(container).attr('indexNum', $(this).attr('num'));
	                sliderMove(container.attr('id'),counts);
	            })  
        );  
    }
    //         
    trigerDivtrigerDiv = trigerDiv.css({left:width-(counts*28+20)});  
    container.append(trigerDiv);  
    
    //      
    this.attr('indexNum', 0);
    sliderMove(this.attr('id'), counts);
    //       
    setInterval("sliderMove('"+this.attr('id')+"',"+counts+");",1000);   
}
function sliderMove(sliderId, count){
	if($('#'+sliderId).attr('state') != 'stop'){
	    var container = $('#'+sliderId);
	    var preIndexNum = Number(container.attr('preIndexNum'));
	    var indexNum = Number(container.attr('indexNum'));
	    //$($('.trigerDiv div', container)[indexNum]).mouseover();  
	    //alert(preIndexNum);
	    if(indexNum==1 && preIndexNum ==count){
	        $('.sliderContent',container).css({top:'0px'});
	    }
	    if(indexNum==0 && preIndexNum == count-1){
	    	indexNum = count;
		    $('.trigerDiv div', container).css(container.mbSlider.trigerCss);  
	        $('.trigerDiv div', container).css({margin:'5px'});  
	        $($('.trigerDiv div', container)[0]).css(container.mbSlider.trigerCss02);  
	        $('.sliderContent',container).stop().animate({top:(-1*(container.mbSlider.height)*count)+'px'});
	    }else{
		    $('.trigerDiv div', container).css(container.mbSlider.trigerCss);  
	        $('.trigerDiv div', container).css({margin:'5px'});  
	        $($('.trigerDiv div', container)[indexNum]).css(container.mbSlider.trigerCss02);  
	        $('.sliderContent',container).stop().animate({top:(-1*(container.mbSlider.height)*$($('.trigerDiv div', container)[indexNum]).attr('num'))+'px'});
	    }
	    container.attr('preIndexNum', indexNum);
	    indexNum = (indexNum + 1) % count;
	    container.attr('indexNum', indexNum);
    }
}  

 
        </script>  

    </head>  
    <body>  
        <div  id="MainPromotionBanner">  
            <div class="sliderContent">  
                <div><a href="#"><img src="cut_image_0_0.jpg" alt="1111111"/></a></div>  
                <div><a href="#"><img src="cut_image_0_1.jpg" alt="2222222"/></a></div>  
                <div><a href="#"><img src="cut_image_0_2.jpg" alt="3333333"/></a></div>  
                <div><a href="#"><img src="cut_image_0_3.jpg" alt="4444444"/></a></div>  
            </div>  
        </div>  
        <script type="text/javascript">$('#MainPromotionBanner').initMbSlider(490,240);</script>
    </body>  
</html>  



'margin':'auto 5'は$('.triger div',container).stop().animate(trigerCss01);の時、IEの中で間違いが発生することができて、分けるべきです