简单的图片轮播(重要的是思想)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播title>
    <style type="text/css">
    * {margin:0;padding: 0}
    ul {list-style: none;}
    img {border: none;}
    #box {width: 800px;height: 360px;margin:30px auto;position: relative;}
    #box ul {position: absolute;left: 0;top: 0;width: 800px;height: 360px}
    #box ul li {width: 800px;height: 360px;display: none;}
    #box ul li.active {display: block;}
    #box p {width: 800px;height: 10px;text-align: center;position: absolute;bottom: -20px}
    #box p span {display:inline-block;width: 100px;height: 10px;margin-left: 20px;background: blue;cursor: pointer;}
    #box p span.btn {background: red}
    style>
    <script type="text/javascript">
    window.onload=function(){
        var oBox=document.getElementById('box');
        var aLi=oBox.getElementsByTagName('li');
        var aSpan=oBox.getElementsByTagName('span');
        var iNow=0;
        var timer=null;
        for (var i = 0; i < aSpan.length; i++) {
            aSpan[i].index=i;
            aSpan[i].onclick=function(){
                iNow=this.index;
                tab();
            }
        }
        function tab(){
            for (var i = 0; i < aSpan.length; i++) {
                aSpan[i].className='';
                aLi[i].className='';
            }
            aSpan[iNow].className="btn";
            aLi[iNow].className="active";
        }
        function next(){
            iNow++;
            if(iNow==aSpan.length){
                iNow=0;
            }
            tab();
        }
        timer=setInterval(next,3000);
        oBox.onmouseover=function(){
            clearInterval(timer);
        }
        oBox.onmouseout=function(){
            timer=setInterval(next,3000);
        }

    }
    script>
head>
<body>
    <div id="box">
        <ul>
            <li class="active"><img src="img/1.jpg" />li>
            <li><img src="img/2.jpg" />li>
            <li><img src="img/3.jpg" />li>
            <li><img src="img/4.jpg" />li>
        ul>
        <p><span class="btn">span><span>span><span>span><span>span>p>
    div>
body>
html>

你可能感兴趣的:(简单的图片轮播(重要的是思想))