`
465272694
  • 浏览: 52264 次
  • 性别: 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 Cycle Plugin,它提供了丰富的选项和过渡效果,使得实现复杂的轮换变得更加容易。 总的来说,jQuery轮换是网页动态效果的重要组成部分,通过...

    JS轮换图片,jquery轮换广告,轮播图片,轮播广告,JS图片切换,淘宝首页轮播,阿里云首页轮播广告

    1. **图片切换**:这是网页设计中常用的一种技术,通过编程方式在页面上展示一系列图片,让它们按设定的顺序或时间间隔自动切换,通常用于展示产品、广告或者信息。 2. **轮播广告**:轮播广告是一种动态的广告形式...

    jquery 广告轮换插件

    **jQuery 广告轮换插件——jQuery_xSlider广告幻灯片插件详解** 在网页设计中,广告轮换是一种常见的展示方式,它能够有效地吸引用户的注意力,展示多个广告或内容,而无需用户手动切换。jQuery,作为一款广泛使用...

    jquery 交叉合并li标签

    在网页开发中,jQuery是一个非常...总的来说,jQuery提供了一种简洁的方式处理DOM操作,使得交叉合并`&lt;ul&gt;`列表成为可能,且易于理解和实现。通过熟练掌握jQuery,开发者能更高效地处理网页中的各种交互和数据操作。

    jquery 图片轮换插件

    **jQuery图片轮换插件详解** 在Web开发中,为了吸引用户注意力并提供丰富的视觉体验,经常需要使用图片轮换效果。"jQuery图片轮换插件"是实现这一功能的有效工具,它允许网页上的图片每隔几秒钟自动切换,使得内容...

    轮换广告代码加演示流行

    4. **内容管理系统(CMS)插件**:对于使用WordPress、Joomla等CMS系统的网站,可以安装专门的轮换广告插件,简化设置过程。 在"轮换广告代码加演示流行"的压缩包中,可能包含了实现轮换广告的各种示例代码和详细...

    jquery标签云制作无规则标签云样式

    4. **动画效果**:如果希望标签在页面加载时有动态效果,可以使用jQuery的`fadeIn()`或`animate()`方法,以平滑的方式展现标签云: ```javascript $('#tag-cloud li').hide().fadeIn(1000); ``` 5. **交互功能**...

    jQuery焦点图 图片轮换

    jQuery焦点图是一种常见的网页设计元素,它用于展示一组图片,并以自动轮换或用户交互的方式显示每一张图片,常用于网站的首页或者产品展示区,为用户提供动态且吸引人的视觉体验。这种效果不仅可以用于图片展示,还...

    jQuery-图片轮换

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

    jquery实现广告伸缩效果

    ### 使用jQuery实现广告伸缩效果 在网页设计与开发领域,使用动态效果增强用户体验是非常重要的一个环节。其中,广告伸缩效果是一种常见的交互方式,它不仅能够吸引用户的注意力,还能在有限的空间内展示更多的信息...

    jquery 轮换图片插件 FlexSlider

    FlexSlider 是一个基于 jQuery 的流行图片轮播插件,它为网页设计师提供了强大的工具来创建美观、响应式的图片轮换效果。这个插件以其灵活性、易用性和丰富的自定义选项而受到广泛赞誉。在本文中,我们将深入探讨 ...

    jquery新闻图片轮换

    jQuery 是一个广泛使用的 JavaScript 库,它提供了丰富的功能和简洁的 API,使得实现这种轮换效果变得简单易行。 一、jQuery 基础 在开始之前,我们需要确保页面已经引入了 jQuery 库。这通常通过在 HTML 文件的 `...

    图片轮换 广告轮换,防CSDN

    实现图片轮换可以使用JavaScript库如jQuery,或者现代前端框架如React、Vue等,也可以借助CSS3动画来实现。 2. 广告轮换:广告轮换是指在特定时间内自动更换广告内容的技术,目的是提高广告的覆盖率和点击率,增加...

    jquery实现ul_li菜单展开收起效果

    接下来,我们使用`jQuery`编写JavaScript代码来实现展开收起的效果。首先,我们需要监听`click`事件,当点击`.parent`类的`li`元素时触发。然后,检查当前点击的元素的子菜单是否已经显示,根据结果决定是展开还是...

    jquery写的tab标签

    在这个主题中,我们主要关注如何使用jQuery库来实现一个功能完备、易于理解的Tab标签组件。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果,使得JavaScript编程更为简洁。 首先,让我们...

    jquery轮换图

    在提供的文件名中,我们可以看到几种不同类型的轮换实现,如“广告轮换”可能包含广告图片的切换,“特效轮换”可能包含更复杂的动画效果,“高级轮换”可能涉及更精细的控制和定制。 5. **jQuery插件**:为了快速...

    最好的jquery标签切换

    jQuery 标签切换的核心在于使用 jQuery 的选择器、事件处理和动画效果。下面将详细讲解如何实现这一功能。 首先,我们需要在HTML文件(如`tab.html`)中设置好结构。通常,标签切换会用到`&lt;ul&gt;`和`&lt;li&gt;`元素来创建...

    jQuery实现输入框回车添加标签代码.zip

    在本文中,我们将深入探讨如何使用jQuery来实现一个功能丰富的输入框,用户可以在其中通过回车键添加标签,同时支持预设标签的选择、显示和删除,并能有效防止标签的重复添加。这个功能常用于博客系统、论坛或者社交...

    jquery 滚动广告图片

    此案例展示了如何使用jQuery库来实现一个自动滚动显示图片的广告轮播效果。 ### 一、整体概述 该案例的目标是创建一个具有自动滚动功能的图片广告组件。它通过动态调整图片列表的位置来实现轮播效果,并且在每个...

    jquery代码实现标签效果

    总之,jQuery提供了一种高效、直观的方式来创建标签效果。通过理解jQuery的基本用法和事件处理机制,我们可以轻松地构建出富有交互性的网页元素,提升用户的浏览体验。在这个过程中,不断学习和实践将使你对jQuery有...

Global site tag (gtag.js) - Google Analytics