转载自w3cfuns的

增强版轮播图
.wrapper{width:740px;margin:0 auto;}.wrapper h1{height:40px;line-height:40px;color:#000;font-family:Microsoft Yahei,"宋体";font-size:20px;border-bottom:4px solid #ff5400;;}.slide{position:relative;width:740px;height:284px;margin:20px auto 0;border:1px solid #C3D2E2;}.img_list{width:740px;height:284px;overflow:hidden;}.img_list a{display:block;width:740px;height:284px;overflow:hidden;}.img_list a img{display:block;width:740px;height:284px;overflow:hidden;}.slide .num{position:absolute;height:20px;overflow:hidden;bottom:10px;right:10px;}.slide .num li{float:left;display:inline;width:20px;height:20px;color:#fff;background-color:#ff5400;text-align:center;font-weight:bold;cursor:pointer;margin-right:10px;}.slide .num .on{color:#ff5400;background-color:#fff;}.img_list .load{width:66px;height:66px;padding:100px 0 0 342px;}
    

增强版轮播图

    
        
            
            
            
            
            
                
            
1            
  • 2
  •             
  • 3
  •             
  • 4
  •             
  • 5
  •             
    var oSlide = {    i: 0,    ex: false,    aID: 0,    bID: 0,    slide: function(){        var len = $('.img_list a').length;        if (oSlide.i < (len - 1)){            oSlide.i++;        }else{            oSlide.i=0;        }        oSlide.loadImage(oSlide.i);        $('.img_list a').fadeOut('fast').eq(oSlide.i).fadeIn('fast');        $('.num li').removeClass('on').eq(oSlide.i).addClass('on');    },    loadImage: function(od){        var thisImg = $('.img_list a').eq(od);        if (thisImg.find('img').hasClass('load')){            var imgSrc = thisImg.find('img').attr('name');            oSlide.preImage(imgSrc,function(){                var that = $(this);                thisImg.find('.load').fadeOut('fast',function(){                    $(this).replaceWith(that);                });            });        }    },    preImage: function(url,callback){        var img = new Image();        img.src = url;        if (img.complete){            callback.call(img);            return;        }        img.onload = function(){            callback.call(img);        };    },    ImgHover: function(){        $('.slide').hover(            function(){                oSlide.bID = setTimeout(function(){                    clearInterval(oSlide.aID);                    oSlide.ex = true;                },300);            },            function(){                  clearTimeout(oSlide.bID);                if (oSlide.ex){                    oSlide.slide();                    oSlide.aID = setInterval(oSlide.slide,3000);                    oSlide.ex = false;                }            }        );    },    guideHover: function(){        $('.num li').mouseover(function(){            if (!$(this).hasClass('on')){                oSlide.i = ($(this).index())-1;                oSlide.slide();                  }        });    },    init: function(){        if (!$('#oSlide')){            return;        }        oSlide.loadImage(0);        oSlide.aID = setInterval(oSlide.slide,3000);        oSlide.guideHover();        oSlide.ImgHover();    }};oSlide.init();