• 技术文章 >web前端 >html教程

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

    奋力向前奋力向前2021-08-27 14:45:39原创309

    之前的文章《手把手教你使用css制作一个简单的心跳效果(代码详解)》中,给大家介绍了怎么使用css制作一个简单的心跳效果。下面本篇文章给大家介绍怎么使用html+css实现轮播图效果,我们一起看看怎么做。

    推动轮播实现效果图如下

    12.gif

    首先写Html部分,你可以理解这个div标签,如果你写CSS或者JS的时候可以用到这几个div标签,<div id="container">就是 一个IDcontainerdiv,先不说多,下面给大家代码示例。

    div id="container">
    <div id="screen">

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

    a href="#"用法

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

    分类

    内部连接:<a href="#/URL">name</a>

    锚记:<a name="object-name">name</a><a href="#object-name">name</a>

    外部链接:<a href="URL">name</a>建立一个以name为表象的网址链接。

    链接说明文字:<a href="/" title="链接说明">...</a>

    img src=""用法

    图片和HTML文本在同一目录下:例如index.htmlimg.jpg

    <img src="img.jpg">

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

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

    图片img.jpg在文件夹images中,index.htmlcontroller文件夹中,imagescontroller文件夹在同一个目录下

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

    将图像宽度和高度分别设置为 200 像素:<img>标签的heightwidth属性设置图像的尺寸。

    <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,再来screena标签设置为【左浮动】并且设置动画属性,周期为1s并且无限循环。

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

    代码效果

    微信截图_20210827140404.jpg

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

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

    @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)}
    }

    效果代码

    12.gif

    ok,完成css代码

    完整代码

    <html>
    <head>
    	<title></title>
    <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>
    </body>
    </html>

    【完】

    推荐学习:HTML/CSS视频教程

    以上就是手把手教你怎么使用html+css实现轮播图效果(代码分享)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html css
    上一篇:一文讲解html中怎么使用SVG实现画走势图(分享代码) 下一篇:用HTML/CSS制作有趣的动态波浪形文本行
    线上培训班

    相关文章推荐

    • 学习中值得了解html网页的基本结构(总结)• Nodejs中如何使用模板引擎?如何使用模板引擎渲染HTML?• 手把手教你使用css给HTML字体添加边框效果(代码分享)• html5篇:实现页面跳转的5种方式(代码分享)• html篇:网页中如何实现输入框效果(代码详解)• 一招教你使用html给图片添加边框效果(代码详解)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网