Home  >  Article  >  Web Front-end  >  How to write css image scrolling code? Horizontal scrolling display of carousel images

How to write css image scrolling code? Horizontal scrolling display of carousel images

藏色散人
藏色散人Original
2018-08-06 10:14:5615423browse

In daily work, carousel image display on web pages is essential, so for newcomers, this article’s introduction to the CSS image scrolling code is even easier to understand. Hope this article is helpful to everyone.

css image scrolling code example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css图片滚动代码示例</title>
</head>
<body>
<style>
    .imglist{
        overflow-x: auto;
        overflow-y: hidden;
        height:180px;
        white-space: nowrap;}
    img{
        width:auto;
        height:100%;
        margin-right:10px;
    }
</style>
<div class="imglist">
    <img  src="img/1.png"/ alt="How to write css image scrolling code? Horizontal scrolling display of carousel images" >
    <img  src="img/2.png"/ alt="How to write css image scrolling code? Horizontal scrolling display of carousel images" >
    <img  src="img/3.png"/ alt="How to write css image scrolling code? Horizontal scrolling display of carousel images" >
    <img  src="img/4.png"/ alt="How to write css image scrolling code? Horizontal scrolling display of carousel images" >
    <img  src="img/5.png"/ alt="How to write css image scrolling code? Horizontal scrolling display of carousel images" >
</div>
</body>
</html>

Note: In HTML, the How to write css image scrolling code? Horizontal scrolling display of carousel images tag has no closing tag and cannot For left floating, the outer container must be added without line breaks. The How to write css image scrolling code? Horizontal scrolling display of carousel images tag does not insert an image into the web page, but links the image from the web page, creating a placeholder for the referenced image.

white-space: nowrap;

How to write css image scrolling code? Horizontal scrolling display of carousel images

【Recommended related articles】

How to implement $.fn and image scrolling effects in jquery

Detailed explanation of how to write css3 custom scroll bar style

Examples to explain CSS3 to achieve infinite loop seamless scrolling

No picture Seam scroll plug-in seamless scrolling code for up, down, left and right pictures

javascript to achieve left and right scrolling effect of pictures [can automatically scroll, with left and right buttons]

[Related video tutorials Recommended】

Picture tag-2016 new curriculum system html css video

The above is the detailed content of How to write css image scrolling code? Horizontal scrolling display of carousel images. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn