代码
//广告轮换效果
var index = 1;
var speed 
= 4000;
var autoMove 
= null;
Move_Interval();
function Move_Interval()
{
    autoMove 
= setInterval(function(){
        index
++;
        
if (index > 4)
        {
            index 
= 1;
        }
        Move();
    }, speed);
}
function Move()
{
    $(
"#img_banner").attr("src","/img_index/v3.0banner"+index+".jpg").hide().fadeIn();
    
for(var j=1;j<5;j++){
        var text 
= $("#li_banner"+j).children("a").text()+$("#li_banner"+j).children("span").text();
        
if(index==j)
            $(
"#li_banner"+j).html("<span class='on'>"+text+"</span>");
        
else
            $(
"#li_banner"+j).html("<a href='javascript:void(0)'>"+text+"</a>");
    }
}

//鼠标放上,放下效果
$("[id^=li_banner]").each(function(i,n){
    $(
this).hover(function(){
        index
=i+1;
        Move();
        window.clearInterval(autoMove);
    },function(){
        Move_Interval();
    });
});

 

 

代码
<ul>
                
<li id="li_banner1"><span class="on">百货谷招商热潮!</span></li>
                
<li style="background: url(img_index/v3.0bannerxian.jpg) no-repeat center center;
                    width: 2px; height: 32px; padding: 0 3px;"></li>
                <li id="li_banner2"><a href="javascript:void(0)">《赢在中国》36强</a></li>
                
<li style="background: url(img_index/v3.0bannerxian.jpg) no-repeat center center;
                    width: 2px; height: 32px; padding: 0 3px;"></li>
                <li id="li_banner3"><a href="javascript:void(0)">独享财富梦想</a></li>
                
<li style="background: url(img_index/v3.0bannerxian.jpg) no-repeat center center;
                    width: 2px; height: 32px; padding: 0 3px;"></li>
                <li id="li_banner4"><a href="javascript:void(0)">《购物指南》免费送</a></li>
            
</ul>

 

 

 posted on 2010-05-31 10:34  ︷起↘嚸.  阅读(320)  评论(0编辑  收藏  举报