ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

怎么使用html+css实现轮播图效果(代码分享)

2021-08-27 15:31:35  阅读:288  来源: 互联网

标签:translate 轮播 代码 transform html 0px css 200px


本篇文章给大家介绍怎么使用html+css实现轮播图效果,我们一起看看怎么做。

 

 推动轮播实现效果图如下

首先写Html部分,你可以理解这个div标签,如果你写CSS或者JS的时候可以用到这几个div标签,

就是 一个ID为container的div,先不说多,下面给大家代码示例。
<div id="container">
<div id="screen">

id="screen" 这个可以给div标签那个块状设置属性,比如 宽、高、颜色、等等。href在是CSS代码的一种意思是指定超链接目标, 标签的src属性是必需的。它的值是图像文件的URL,也就是引用该图像的文件的的绝对路径或相对路径。

a href="#"用法

<a href="#" onclick="window.close()"></a>

分类

内部连接:name

锚记:namename

外部链接:name建立一个以name为表象的网址链接。

链接说明文字:...

img src=""用法
图片和HTML文本在同一目录下:例如index.html和img.jpg

<img src="img.jpg">

图片和HTML不在同一目录下: 图片img.jpg在文件夹images中,index.html和images文件夹在同一个目录下

<img src="images/img.jpg">

图片img.jpg在文件夹images中,index.html在controller文件夹中,images和controller文件夹在同一个目录下

<img src="../images/img.jpg">

将图像宽度和高度分别设置为 200 像素:标签的height和width属性设置图像的尺寸。

<img src="#" height="200" width="200" >

html完整代码

<body>
	<div id="container">
	<div id="screen">
	<a href="#"><img src="001.jpg" width="200" height="200" target="_blank"></a>
	<a href="#"><img src="002.jpg" width="200" height="200" target="_blank"></a>
	<a href="#"><img src="003.jpg" width="200" height="200" target="_blank"></a>
	</div>
</body>

ok,写完html编辑代码,接下来使用css写编辑

用内外边距均设置为0px,再来screen中a标签设置为【左浮动】并且设置动画属性,周期为1s并且无限循环。

*{
    margin: 0px;
    padding: 20px;
}
#screen a{
    animation: donghua 1s infinite;
    float: left;

代码效果

 

 

设置container宽度高度均为200px(与图片宽度相同),并且将溢出部分隐藏起来。

在并排五张图的直线上,以每张图左下角为坐标点,其横坐标分别为0px,200px,400px,600px,800px

@keyframes donghua{
    0%{transform: translate(0px)}
    18%{transform: translate(0px)}
    20%{transform: translate(-200px)}
    38%{transform: translate(-200px)}
    40%{transform: translate(-400px)}
    58%{transform: translate(-400px)}
    60%{transform: translate(-600px)}
    78%{transform: translate(-600px)}
    80%{transform: translate(-800px)}
    100%{transform: translate(-800px)}
}

效果代码

ok,完成css代码

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		*{
			margin: 0px;
			padding: 20px;
		}
		#screen a{
		animation: donghua 1s infinite;
		float: left;
		}
		@keyframes donghua{
		0%{transform: translate(0px)}
		18%{transform: translate(0px)}
		20%{transform: translate(-200px)}
		38%{transform: translate(-200px)}
		40%{transform: translate(-400px)}
		58%{transform: translate(-400px)}
		60%{transform: translate(-600px)}
		78%{transform: translate(-600px)}
		80%{transform: translate(-800px)}
		100%{transform: translate(-800px)}
		}
		</style>
	</head>
	<body>
		<div id="container">
		<div id="screen">
		<a href="#"><img src="001.jpg" width="200" height="200" target="_blank"></a>
		<a href="#"><img src="002.jpg" width="200" height="200" target="_blank"></a>
		<a href="#"><img src="003.jpg" width="200" height="200" target="_blank"></a>
		</div>
		</div>
	</body>
</html>

以上就是怎么使用html+css实现轮播图效果(代码分享)的详细内容。(拼多多培训

标签:translate,轮播,代码,transform,html,0px,css,200px
来源: https://www.cnblogs.com/qilunpdd/p/15193969.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有