Home >Web Front-end >CSS Tutorial >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:5615468browse
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 tag has no closing tag and cannot For left floating, the outer container must be added without line breaks. The
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;
【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
[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!