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の中で間違いが発生することができて、分けるべきです