怎么用html5+div+css+js实现图片轮播功能

发布时间:2021-08-25 18:15:59 作者:chen
来源:亿速云 阅读:452

本篇内容主要讲解“怎么用html5+div+css+js实现图片轮播功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用html5+div+css+js实现图片轮播功能”吧!


1.图片标签    

<img />标签

用来显示图片的标签。它的Src属性用来设置图片来源,其实也可以直接设置width来设置图片的宽度,设置height来是指图片的高度。值得注意的是,图片的宽度一旦设置以后,图片的高度会自动按图片比例进行缩放。

2.脚本标签

<script>标记

这里开始写js代码,这个代码用来控制网页上面html标签的逻辑,俗称DOM控制。
注释的标记   //单行注释      /*  ….. */  多行注释

2.1逻辑

这里有个图片切换的逻辑控制,就是n变量的变化。

n++  意义是   n=n+1   用来切换图片名称

2.2 dom控制

document.getElementById(“对应html中标签的ID的值”)  返回一个对应的 标签对象。

innerHTML表示某个容器内部所有的html代码。

3.符号与html中的对应关系

符号对应。

空格对应到url中是20%

4.总结

素材:

怎么用html5+div+css+js实现图片轮播功能

源代码:

index.html文件

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>首页-刘金玉编程</title>    <link rel="stylesheet" href="css/main.css" />  </head>  <body>    <div class="wrapper">      <div class="header">        <div class="logo">刘金玉编程</div>      </div>      <div class="main">        <div id="pics">          <img src="img/a%20(1).jpg" />        </div>      </div>      <div class="footer"></div>    </div>  </body></html><script src="js/main.js"></script>

main.css文件

body{  margin:0;}.logo{  color:white;  font-weight: bolder;  padding:10px;  font-size: 20px;  background-color: #9ACD32;}#pics img{  width: 100%;}

到此,相信大家对“怎么用html5+div+css+js实现图片轮播功能”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Jquery实现图片轮播功能
  2. 使用jQuery怎么实现一个图片轮播功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5 javascript css

上一篇:python的BeautifulSoup4库的用法介绍

下一篇:怎么用html5实现网页导航栏

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》