利用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 alt="利用jQuery创设的图片滑动效果"/></a></div> <div><a href="#"><img src="cut_image_0_1.jpg" alt="利用jQuery创设的图片滑动效果"/></a></div> <div><a href="#"><img src="cut_image_0_2.jpg" alt="利用jQuery创设的图片滑动效果"/></a></div> <div><a href="#"><img src="cut_image_0_3.jpg" alt="利用jQuery创设的图片滑动效果"/></a></div> </div> </div> <script type="text/javascript">$('#MainPromotionBanner').initMbSlider(490,240);</script> </body> </html>