CSS+JS ————实现简单的轮播图效果-蒲公英云

CSS+JS ————实现简单的轮播图效果

效果可能不是太好
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type= "text/css">
        #top_img{ 
            width: 500px;
            height:400px;
            margin: 0 auto;
            border:1px solid black;
            background-size:500px 400px;
            transition:background-image 0.8s ease-in-out;/* 设置过渡效果*/
            position: relative;
            top:0;
            left: 0;
        }
        ul{ 
            position:absolute;
            bottom:0;
        }
        li{ 
            float: left;
            width: 10px;
            height: 10px;
            margin-left:10px;
            list-style-type: none;
        }
        .d{ 
            width:10px;
            height: 10px;
            border-radius:5px;
            background:#fff;
        }
    </style>
</head>
<body>
    <div id = "top_img">
        <ul >
            <li class = "li"><div class = "d"></div> </li>
            <li class = "li"> <div class = "d"></div></li>
            <li class = "li"> <div class = "d"></div></li>
            <li class = "li"> <div class = "d"></div></li>
        </ul>
    </div>
<script type="text/javascript" >
        var imgPath = new Array("0039.jpg", "0040.jpg", "0041.jpg", "0042.jpg");// 图片路径数组
        var top_img = $("top_img");
        var len = imgPath.length;
        var now = len-1, last = 0;// now 表示本次小点的序号 last 表示上一个图片的小点
        function getLast(now){ //获取last
            return ((now-1)%len+len)%len;
        }
        function $(id){ // 通过id 获取对象的函数
            return document.getElementById(id);
        }
        function changeImage(){ 
            now++;
            if(now >= len)now = 0;
            top_img.style.backgroundImage = "url("+imgPath[now]+")"; // 改变图片
            last = getLast(now);
            document.getElementsByClassName("d")[last].style.backgroundColor = "#fff";// 取消上一个小点的红色
            document.getElementsByClassName("d")[now].style.background = "red";// 设置本次小点为红色
        }
        var interval1 = window.setInterval("changeImage()", 2000); // 每过两秒调用 函数
</script>
</body>
</html>