用JavaScript做简易的轮播图

下面的是一个轮播图,超简单.
上大二的时候学静态网页,有了解过一点当时觉得超级不好做,现在再看就轻松多了.
下面就要开始表演了.
css

<style>
        #showimg{
            width: 500px;
            height: 200px;
             margin-top: 20px;
             margin-left: 500px;
        }
        #showimg img{
            transition: width .5s;
            width: 500px;
            height: 200px;
            display: inline;
  }
        .ulstyle{
            list-style: none;
            text-align: center;
        }
        .ulstyle li{
            display: inline-block;
            padding: 5px;
            background-color: grey;
            width: 20px;
            height: 20px;
            color: white;
            border-radius: 50%;
            cursor: pointer;
        }


    </style>

body

<div id="showimg">
    ![](../img2/10.jpg)
    ![](../img2/11.jpg)
    ![](../img2/12.jpg)
    ![](../img2/13.jpg)
    ![](../img2/15.jpg)
    <ul class="ulstyle">
        <li>1</li>
        <li >2</li>
        <li >3</li>
        <li >4</li>
        <li >5</li>
    </ul>

</div>
<div id="divmx"></div>

js

<script>
    var divimg = document.getElementById("showimg");//创建图片div对象
    var lis = document.getElementsByTagName("li");//创建li对象
//    var lis = document.getElementByid("li1");

    for(var i=0;i<lis.length;i++){ //循环lis
        lis[i].index=i;//获取下标
        lis[i].onclick=function(){ //给每个li添加事件
            count=this.index;
            showimg();
        }

    }
    divimg.onmouseover=function(){ //当鼠标在图片上的事件
//        console.log("over");
        clearInterval(setIntobj); //清除动画
    }
    divimg.onmouseout=function(){ //当鼠标离开是的事件
//        console.log("out");
        clearInterval(setIntobj);//先清除
        setIntobj=setInterval(showimg,1000);//在创建重新执行

    }

    var count = 0;
    function showimg(){ //图片
        var imgs = document.getElementsByTagName('img');//创建图片对象
        for(var i=0;i<imgs.length;i++){ //循环得到单个图片
            imgs[i].style="display:none";//使用display属性的显示和隐藏
        }
        imgs[count].style="display:block";
        count++;
        if(count==imgs.length){//重复循环图片
            count=0;
        }
    }
    var setIntobj=setInterval(showimg,1000); //每隔1秒执行



</script>

是不是很简单....
大家可以用在线的编辑器看效果,有点丑将就看吧.