web-set scrolling image (Experiment 5)

Design an image gallery

1. Title
Design an image gallery, and the page effect is shown in the image gallery below. Use an unordered list to load five images, and use the scrolling text marquee mark and its attribute settings to realize the five images scrolling alternately from right to left.
Note: The style sheet is needed in the design (insert the following code directly into the head tag) as shown in the following
Insert picture description hererenderings:
Insert picture description hereSecond, topic analysis

1. "Load five portraits with unordered list"
has been given hints for the code title, just add it in the head. (For detailed list content, please refer to Experiment 6)
2. "Use the scrolling text marquee mark and its attribute settings to realize the image scrolling alternately from right to left" The
marquee mark can add scrolling text or other content to increase the dynamic effect of the web page.
The attributes in marquee are:
(1) bgcolor attribute: set the background color of the scrolling text;
(2) loop attribute: set the number of scrolling cycles of the scrolling text, generally set to an integer, -1 means infinite loop;
(3) direction Property: Set the scroll direction. up-scroll up; down-scroll down; left-scroll to the left (left by default); right-scroll to the right
(4) behavior attribute: scroll mode. scroll-cyclic scrolling (scroll by default); slide-scrolling once and stop; alternate-alternate scrolling back and forth;
(5) scrollamount attribute: scrolling speed, actually refers to the length of each scrolling text (unit is Pixels);
(6) scrolldelay attribute: scroll delay, the smaller the value, the faster the scrolling speed.
(7) Width attribute, height attribute: set the scrolling range, expressed in numbers, and the unit is pixels. The scroll range refers to the area of ​​the scrolling background, which is a color band;
(8) hspace attribute, vspace attribute: scroll blank space, expressed as an integer, and the unit is pixel. Scrolling blank space refers to the range of blank space between the scrolling text background and the surrounding text and images.
Insert picture description here3. Set the scrolling image and change the text content to the image link.
3. Material preparation
Insert picture description hereInsert picture description here The prepared image has been put into the images file.When writing the code, pay attention to the relative position of the image of the file and the html file.
4.
Insert picture description here The focus of code writing here is the integrated application of marquee logo and image link.
5. Effect display

web-image gallery

Guess you like

Origin blog.csdn.net/weixin_45952057/article/details/108769971