`
agileai
  • 浏览: 60455 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jquery banner 轮播

 
阅读更多

1 概述

Banner可以作为网站页面的横幅广告,也可以作为活动时用的标识,还可以是报纸杂志上的大标题。Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。在以往很多项目中主要体现在首页、登录页中对客户的提供的图片进行展示,本文档主要介绍基本的使用方式和结合我们aeai_portal产品首页的展示配置改造方式。

2 样例介绍

样例结构如下图,images文件夹、js文件夹和indexhtml文件。

  1. image:样例中使用到的图片;
  2. js: jquery-1.10.2.min.js和slider.js存放位置;
  3. index.html:样例展示页面。

 

页面效果图如下,实现定时自动轮播,鼠标悬浮轮播,手动轮播功能;

 

3 门户配置

门户中的是传统的jQuery轮播方式,无论从外观样式还是交互方式都没有banner有优势,下面介绍一下在首页改造成banner的配置方法。

3.1 存放图片

将样例中的banner按钮图片引入\webapps\HotServer\reponsitory\images文件中,如下图所示:

3.2 引入js文件

  1. 将样例中的slider.js文件添加至webapps\portal\js文件夹中,样例中的jquery.js文件不用引入,webapps\portal\js中有内置的jquery.js文件。
  2. 在\webapps\portal\themes\out\website文件夹中将首页(PortalPreset.jsp)页面中引入slider.js文件,如下图所示:

3.3 改造portlet

在数据管理导航进到静态数据下,如下图:

修改JQuery图片播放静态数据,如下图所示。

3.4 效果展示

4 附件说明

  1. banner样例:banner轮播样例工程。
  2. 门户修改内容:门户修改的参考文件。
    • PortalPreset.jsp:\webapps\portal\themes\out\website下的文件。
    • 静态数据.txt:数据管理导航进到静态数据下的JQuery图片播放模板代码。

附件及文档下载地址:https://pan.baidu.com/s/1dE6rqMH

分享到:
评论

相关推荐

    jquery banner切换

    在网页设计中,jQuery Banner切换是一种常见的动态效果,用于展示多张图片或内容,并通过滑动、淡入淡出等方式实现自动或手动切换,提升用户体验和网站视觉吸引力。"jQuery banner切换"通常涉及到HTML结构、CSS样式...

    jquery Banner轮播选项卡

    jQuery Banner轮播选项卡是一种利用jQuery库实现的网页元素,它通常被用于展示产品图片、广告、新闻等信息。通过轮播效果,可以将有限的页面空间用于展示更多的内容,增强用户体验。本文将详细介绍如何通过HTML、CSS...

    jQuery广告banner轮播效果

    以上就是关于“jQuery广告banner轮播效果”的核心知识点。通过熟练掌握和应用这些概念,开发者可以创建出富有吸引力、用户体验良好的广告轮播效果。在实际项目中,我们可以结合HTML、CSS和jQuery,根据具体需求进行...

    jQuery一个banner多格子轮播切换

    在"jQuery一个banner多格子轮播切换"这个主题中,我们将深入探讨如何使用jQuery来实现一个具有多格子展示效果的Banner轮播切换功能。 首先,我们需要理解轮播切换的基本原理。轮播切换通常是通过在一组图片或内容...

    通栏大banner轮播

    本篇文章将深入探讨通栏大banner轮播的设计原理、实现方式以及jQuery在其中的应用。 首先,通栏大banner轮播的设计目的是优化用户体验,它能够在一个有限的空间内展示多张图片或信息。通常,轮播由多个不同的图片或...

    jquery全屏banner自动轮播切换

    "jquery全屏banner自动轮播切换"是指使用jQuery库来创建一个自动在全屏背景下切换图片或内容的Banner效果。 首先,要实现这个功能,我们需要对jQuery的基本语法有一定的了解。jQuery简化了DOM操作、事件处理和动画...

    banner轮播

    实现Banner轮播的技术方案多种多样,常见的有JavaScript库如jQuery、React、Vue等,以及专门的轮播组件如Swiper、Slick等。这些库和组件通常提供丰富的选项和自定义功能,可以轻松实现轮播的自动播放、手动滑动、...

    banner轮播效果累计6种

    【标题】"Banner轮播效果累计6种"指的是在网页设计中常见的Banner(横幅广告)展示方式,这种效果能够以动态的形式展示多张图片或信息,提高用户体验和页面的吸引力。通常,轮播效果包括自动播放、手动切换、指示器...

    jquery banner焦点图小图标提示全屏滚动轮播

    总结起来,这个“jquery banner焦点图小图标提示全屏滚动轮播”项目涉及到的主要知识点有:jQuery选择器、DOM操作、CSS样式、JavaScript事件处理、动画效果(如`animate`方法)以及数据属性的使用。通过这些技术,...

    banner轮播图

    【banner轮播图】是一种常见的网页设计元素,用于在网站的首页或重要位置展示多张宣传图片,以吸引用户注意力并引导他们浏览更多的内容。在本案例中,我们讨论的是一个包含4张轮播图片的组件,具备左右旋转功能,这...

    banner无缝轮播jquery效果

    在网页设计中,Banner轮播图是一种常见的元素,用于展示不同的广告或者引导用户关注特定的内容。本文将详细解析一个使用jQuery实现的简洁易懂的Banner无缝轮播效果,并对代码进行逐行分析。 #### 二、核心知识点 #...

    jquery全屏banner图片淡出淡进自动轮播切换代码

    在网页设计中,jQuery 全屏 banner 图片的淡出淡进自动轮播切换是一种常见的效果,用于吸引用户的注意力并展示重要信息。这种效果通过利用 jQuery 的动画功能和定时器实现,可以创建出流畅且富有视觉吸引力的用户...

    手机端banner轮播效果

    在移动设备上,Banner轮播效果是网页设计中常见的元素,用于展示多个广告或重要信息。这个效果使得有限的屏幕空间能高效地呈现多张图片或内容,吸引用户的注意力并提供交互体验。以下是对手机端Banner轮播效果的详细...

    jquery全屏banner自动轮播切换特效代码

    "jquery全屏banner自动轮播切换特效代码"是一种利用jQuery库实现的动态效果,它将全屏背景图片以自动轮播的方式进行切换,同时伴有淡入淡出的平滑过渡效果,为用户提供优质的浏览体验。 jQuery是一个轻量级、高性能...

    Banner - 广告轮播

    2. **JavaScript/jQuery**:实现轮播的动态效果,如自动切换、鼠标悬停暂停、箭头导航等交互功能。 3. **响应式设计**:确保Banner在不同设备(桌面、平板、手机)上都能适配显示,提供良好的用户体验。 4. **框架...

    支付宝 淘宝 banner轮播图效果

    【支付宝淘宝Banner轮播图效果】是网页设计中常见的元素,尤其在电商平台如支付宝和淘宝上,用于展示促销信息或热门商品。这种效果通常由JavaScript库实现,特别是jQuery,一个广泛使用的JavaScript库,能简化DOM...

    Jquery Banner图片切换demo下载

    标题“Jquery Banner图片切换demo下载”涉及到的是一个基于jQuery实现的网页横幅(Banner)图片轮播功能的示例代码。这个项目可能是为网站设计者或开发者提供的一种快速实现动态图片展示效果的工具。 首先,jQuery...

    jquery banner图片动画切换_图片左右滑动切换轮播代码

    在本主题中,“jquery banner图片动画切换”指的是利用jQuery实现的图片轮播效果,通常用于网站的头部 banner 区域,以吸引用户注意力并展示多张重要或吸引人的图片。这种轮播效果允许用户通过左右滑动或其他交互...

    jQuery响应式Banner图片轮播代码.zip

    在网页设计中,jQuery响应式Banner图片轮播是一种常见的元素,用于展示多张图片或内容,为用户带来动态且交互的浏览体验。这种效果通常应用于网站的首页,以吸引访问者的注意力并展示重要信息。本资源"jQuery响应式...

Global site tag (gtag.js) - Google Analytics