1 Overview

Banner can be used as a banner advertisement on a website page, as a logo for an event, or as a headline in a newspaper or magazine. Banner mainly embodies the central intention, and the image clearly expresses the most important emotional thoughts or publicity center. In the past, many projects were mainly reflected in the display of pictures provided by customers on the homepage and login page. This document mainly introduces the basic usage and the display configuration transformation method combined with the homepage of our aeai_portal product.

2 Sample introduction

The sample structure is as shown below, images folder, js folder and indexhtml file.

image: the image used in the sample;
js: The storage location of jquery-1.10.2.min.js and slider.js;
index.html: Sample display page.

The effect diagram of the page is as follows, which realizes the functions of timing automatic rotation, mouse hovering rotation, and manual rotation;

3 Portal configuration

The portal uses the traditional jQuery carousel method, which does not have the advantage of banner in terms of appearance and interaction. Let's introduce the configuration method of transforming into a banner on the home page.

3.1 Store pictures

Import the banner button image in the sample into the \webapps\HotServer\reponsitory\images file, as shown in the following figure:

3.2 Introducing js files

Add the slider.js file in the sample to the webapps\portal\js folder. The jquery.js file in the sample does not need to be imported. There is a built-in jquery.js file in webapps\portal\js.
Introduce the slider.js file into the home page (PortalPreset.jsp) page in the \webapps\portal\themes\out\website folder, as shown in the following figure: