JS实现图片动态轮播效果 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" charset="utf-8" />
    <meta http-equiv="content-type" content="text/html" />
    <title>JS实现图片轮播效果</title>
</head>
<style type="text/css">
    *{margin:0;padding:0;}
    ul,li,img{margin:0;padding:0;
        border:0;
        list-style:none;
    }
    #list{
        height:250px;
        list-style:none;
        overflow:hidden;
    }
    #luanpo{
        max-width:490px;height:170px;
        border:1px solid #CCC;
        margin:0 auto;
        position:relative;
        overflow:hidden;
    }
    #imgs{
        height:200px;
        background:#ddd;
        position:absolute;
    }
    #imgs li{
        float:left;
        height:200px;width:600px;
    }
    .a{background:red;}
    .b{background:yellow;}

    #num{
        overflow:auto;
        position:absolute;
        right:0;bottom:0;
    }
    #num li{
        float:left;
        height:20px;width:20px;
        text-align:center;
        line-height:20px;
        border:1px solid #CCC;
        margin-left:10px;
        cursor:pointer;
        z-index:2222;
    }
</style>
<body>
<div id="luanpo">
    <ul id="imgs">
        <li><img src="../image/01.jpg"> </li>
        <li><img src="../image/02.jpg"> </li>
        <li><img src="../image/03.jpg"> </li>
        <li><img src="../image/04.jpg"> </li>
    </ul>
    <ul id="num">
        <li class="a">1</li>
        <li class="b">2</li>
        <li class="b">3</li>
        <li class="b">4</li>
    </ul>

</div>


<script type="text/javascript">
    var imgs=document.getElementById('imgs').getElementsByTagName('li');
    var nums=document.getElementById("num").getElementsByTagName("li");
    var luanpo=document.getElementById("luanpo");
    var oimg=document.getElementById('imgs');
    var iNow=0;
    var dt=null;
    oimg.style.width=imgs.length*imgs[0].offsetWidth+"px";

    function tab(){
        for(var i=0;i<nums.length;i++){
            nums[i].index=i;
            nums[i].οnclick=function(){
                clearInterval(dt);
                iNow=this.index;
                for(var i=0;i<nums.length;i++){
                    nums[i].className="b";
                }
                this.className="a";
                oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";    //这边可以加上我前面所写的那个缓动框架
            }
            nums[i].οnmοuseοut=function(){
                start();
            }
        }
    }

    function start(){
        clearInterval(dt);
        dt=setInterval(function(){
            if(iNow>nums.length-2){
                iNow=0;
            }else{
                iNow++;
            }
            for(var k=0;k<nums.length;k++){
                if(iNow==nums[k].index){nums[k].className='a';}else{nums[k].className='b';}
            }
            oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";    
        tab();
    }

    start();
</script>
</body>
</html>

posted @ 2017-02-23 15:19  傲骄鹿先生  阅读(16)  评论(0)  编辑  收藏  举报