您的位置：首页 > Web前端 > JavaScript

用原生js制作轮播图，以及关于position的简单归纳

2018-04-05 20:15 399 查看

<html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>轮播图</title>
<style> #outer{ width: 105px; height: 70px; position: relative; overflow: hidden; }
img{ width: 105px; height: 70px; /* position用来设置网页元素的布局方式，默认是static普通流。想让一个元素脱离网页的普通流，有两种方式： 1. fixed; 用于固定某一个元素于网页窗口的某一个位置，比如：回到网页顶部的按钮 2. absolute; 绝对定位的元素，会脱离并显示在普通流内容之上
应该还经常遇到relative相对定位，相对定位没有脱离文档普通流，但是也能浮动。用于两个场合： 1. 不脱离网页文档流，浮动 2. （绝对定位是根据它的包含块来定位的，而包含块是一个距离绝对定位元素最近的相对定位元素）为了包含一个绝对定位的元素，因为绝对定位的元素会根据其父级相对定位的元素进行定位
*/ position: absolute; } </style>
</head><body> <div id="outer"> <img src="pic1.jpg" alt=""> <img src="pic2.jpg" alt=""> <img src="pic3.jpg" alt=""> </div>

<script>
var imgs = document.getElementsByTagName("img"); window.onload = function(){ // 拿到页面中所有的img标签所表示的图片元素们，所以这边的imgs保存的是一个数组 // 写一个循环，设置每张图片的left属性 // 在JS中，搞清楚可读性，可写性。 // 如果要【读取】某一个元素的左边距，用“元素.offsetLeft”来读取（读取到一个数字，不包含单位）。 // 要设置要【写】左边距，用 ‘ 元素.style.left = 数字 + "px" ’ for( i in imgs){ imgs[i].style.left = 105 * i + "px"; } // 每隔30毫秒，执行一次函数movePics() } var inter=setInterval("movePics()", 30); var a=0;

// 移动三张图片 function movePics(){ a++; for( i in imgs){ imgs[i].style.left = imgs[i].offsetLeft - 1 + "px"; if(imgs[i].style.left==="-105px") { imgs[i].style.left=210+"px"; clearInterval(inter); setTimeout('inter=setInterval(movePics, 30)',1000); } } } </script></body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航