`
465272694
  • 浏览: 52743 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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>
 
分享到:
评论

相关推荐

    jQuery-图片轮换

    本文将深入探讨如何使用jQuery实现图片轮换,包括基本原理、相关函数以及常见插件的使用。 一、jQuery图片轮换的基本原理 图片轮换的基本思想是通过JavaScript控制DOM(Document Object Model)中的图片元素显示与...

    仿麦包包首页tab轮换图jQuery特效

    ### 仿麦包包首页tab轮换图jQuery特效详解 #### 一、项目背景与目标 在前端开发领域,实现各种动态效果是提升用户体验的关键之一。本文档将详细解析一个具体的前端开发案例:“仿麦包包首页tab轮换图jQuery特效”。...

    jQuery带箭头图片折叠轮换.zip

    在本项目"jQuery带箭头图片折叠轮换.zip"中,我们主要探讨的是如何使用前端技术,特别是jQuery库,来实现一种动态的、带有箭头指示的图片轮换效果。这个效果通常用于网站的滑块、展示区域或者产品轮播等场景,能够...

    jquery和纯javaScript实现的客户端验证

    对于Tab切换,jQuery的`.click()`事件和`.hide()`与`.show()`方法能轻松实现。例如: ```javascript $('ul.tabs li').click(function(e) { e.preventDefault(); var tab_id = $(this).attr('data-tab'); $('ul....

    【JavaScript源代码】使用jquery实现轮播图效果.docx

    ### 使用jQuery实现轮播图效果 #### 一、概述 本文档主要介绍如何使用jQuery库来实现一个简单但实用的轮播图效果。通过引入jQuery并结合HTML与CSS,可以轻松地创建动态轮播功能,这在现代网页设计中非常常见。轮播...

    推荐信息轮番效果(可自动).rar

    2. 使用jQuery库:jQuery提供了一些方便的API,如`.show()`、`.hide()`和`.fadeIn()`、`.fadeOut()`,可以简化DOM操作和动画效果的实现。 3. 使用现代前端框架:如React、Vue或Angular,它们提供了更高级的组件化...

Global site tag (gtag.js) - Google Analytics