JavaScript 图片轮播入门

轮播要求：
一个在页面居中的矩形框，图片依次从矩形框中经过 当图片完整占满矩形框时 停留一小段时间再向左边移动
经过矩形框的图片自动跑到右边最后一个图的后面。
核心原理：
在一个for循环中利用offsetleft（）不断向父元素的内边距左边或者右边添加值 使目标图片移动 并利用
settimeout（）的间隔xx毫秒执行一次函数的特点控制轮播的速度，再用一个判断控制图片完整占满矩形框
时的暂停时间。
也可以利用 setinterval（）间隔xx秒无限调用函数的特点来控制轮播速度
实例：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 192px;
            height: 175px;
            border: 1px solid gray;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        #div1 img{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1">
    <img src="img/4.jpg" alt="" width="192"/>
    <img src="img/3.jpg" alt="" width="192"/>
    <img src="img/2.jpg" alt="" width="192"/>
    <img src="img/1.jpg" alt="" width="192"/>
</div>
<div id="div2">
</div>
<script>
    //获取页面元素
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var imgs = div1.getElementsByTagName('img');
    //初始化页面图片的位置。window.onload 表示页面加载时执行某函数
    window.onload=function(){
        for(var i=0; i<imgs.length; i++){       //imgs.length 图片集合长度
            imgs[i].style.left = i*192 + 'px';  
        }
    }
    //轮播移动的函数
    function imgMove(){
        var bl = false;
        for(var i=0; i<imgs.length; i++){
            imgs[i].style.left = imgs[i].offsetLeft - 1 + 'px';
            if(imgs[i].offsetLeft == 0){
                bl = true;
                if(i==0)
                    imgs[imgs.length-1].style.left='576px';
                else                    imgs[i-1].style.left = '576px';            }        }        if(!bl)            setTimeout(imgMove, 20);        else            setTimeout(imgMove, 3000);
    }    //开始调用轮播    setTimeout(imgMove, 3000);</script></body></html>
秒客网

JavaScript 图片轮播入门

相关文章
