当前位置: 代码迷 >> Web前端 >> jquery的替换广告(不是用li标签,而是用show&hide方式)
  详细解决方案

jquery的替换广告(不是用li标签,而是用show&hide方式)

热度:94   发布时间:2012-08-29 08:40:14.0
jquery的轮换广告(不是用li标签,而是用show&hide方式)
/*轮换*/
    var laodao_i = 0, //a排序序号
            landao_span_arr = 0,
            laodao_span_num = 0; // 统计a数量并减 1 处理
    var d; //函数对象
    $(function(){
        hideRoteAdv();
        autoScroll(); // 先执行一次函数 laodao()
    });
    function showRoteAdv(advImgId,advTitle,aId){
        clearTimeout(d);
        hideRoteAdv();
        $(advImgId).show(300);
        $(advTitle).show(300);
        $(aId).addClass("cur");
    }
    function hideRoteAdv(){
        $("#advRote").find("a").each(function(){
            $(this).hide();
        });
        $("#advTitleRote").find("a").each(function(){
            $(this).hide();
            $(this).removeClass();
        });
        $("#advIdRote").find("a").each(function(){
            $(this).removeClass();
        });
    }
    function autoScroll() {
        if(landao_span_arr==0){
            landao_span_arr = $("#advRote").children("a");
            laodao_span_num = landao_span_arr.length - 1; // 统计span数量并减 1 处理
        }
        if (laodao_i > laodao_span_num) {laodao_i = 0;} // 如果计数器(span排序)大于 laodao_span_num 时归零
        $('#advRote a:eq('+laodao_i+')').fadeIn(50); //渐显效果显示第 laodao_i 个span
        $('#advTitleRote a:eq('+laodao_i+')').fadeIn(50);

        $("#advIdRote a").each(function(){
            $(this).removeClass();
        });

        $('#advIdRote a:eq('+laodao_i+')').addClass("cur");
        d = setTimeout(function() {
            $('#advRote a:eq('+laodao_i+')').fadeOut(50);
            $('#advTitleRote a:eq('+laodao_i+')').fadeOut(50);
            laodao_i++;
            autoScroll();
        },4500);
    };
    /*轮换*/
?
<div class="pic" id="advRote" style="height: 216px" >
            <c:forEach items="${advList}" var="advProxys">
                <c:forEach items="${advProxys.advts}" var="adv" varStatus="s">
                    <a id="roteImg${s.count}" href="${adv.advt.link}"><img src="${adv.url}" width="276px" height="216px" /></a>
                </c:forEach>
            </c:forEach>
        </div>
?
  相关解决方案