JavaScript实现图片轮播效果

img标签

<img src="demo1.png">
<img src="demo2.png">
<img src="demo3.png">
<img src="demo4.png">

css设置

width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
display: none;

获取img标签

var imgs = document.getElementsByTagName('img');

imgshow显示标签

function imgshow(ix) {
    for (var c = 0; c < imgs.length; c++) {
        imgs[c].style.display = 'none';
    }
    for (var i = 0; i < imgs.length; i++) {
         if (i == ix) {
             imgs[ix].style.display = 'block';
         } else {
            imgs[i].style.display = 'none';
          }
     }
}

xshow赋值索引值

var j = 0;
function xshow() {
    if (j > 3) {
        j = 0
    }
    imgshow(j);
    j++;
}

定时器

setInterval("xshow()", 1000);

position: absolute;设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位。

包含块可能是文档中的另一个元素或者是初始包含块

元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setInterval() 方法不能放在循环里使用。