轮播 纯js，html实现轮播效果

第一部分 css样式 主要用到定位与一些简单的效果修饰

* {
                margin: 0;
                padding: 0;
            }
            
                .lb {
                width: 640px;
                height: 270px;
                margin: 10px auto;
            }
            
            #left-arrow {
                position: relative;
                display: inline-block;
                top: -180px;
                z-index: 999;
                cursor: pointer;
            }
            
            #right-arrow {
                position: relative;
                display: inline-block;
                top: -180px;
                right: -540px;
                z-index: 999;
                cursor: pointer;
            }
            
            #num-btn span {
                display: inline-block;
                font-size: 20px;
                width: 23.2px;
                font-family: arial;
                text-align: center;
                border-radius: 50%;
                color: #fff;
                cursor: pointer;
                margin-left: 10px;
            }
            
            #num-btn {
                position: relative;
                top: -100px;
                left: 35%;
            }

第二部分 js修饰

var left = document.getElementById("left-arrow");
            var right = document.getElementById("right-arrow")
            var img = document.getElementById("img");
            var index = 1;
            var btns = getChildren("num-btn","span");
            function getChildren (id,tagname) {
                var arr=document.getElementById(id).childNodes;
                var ele=[];
                for(var i=0;i<arr.length;i++){
                    if(arr[i].tagName==tagname.toUpperCase()){
                        ele.push(arr[i]);
                    }
                }
                return ele;
            }            
            for(var i = 0; i < btns.length; i++) {
                btns[i].onclick = (function() {
                    var j = i + 1;
                    return function() {
                        index = j;
                        img.src = "img/" + index + ".jpg"
                        changebg();
                    }
                })();
            }
            function changebg() {
                for(var i = 0; i < btns.length; i++) {
                    btns[i].style.background = "#000";
                }
                btns[index - 1].style.background = "#f00";
            }
            var moveLeft = function() {
                index++;
                if(index > 7) index = 1;
                img.src = "img/" + index + ".jpg"
                changebg();
            }
            right.onclick = moveLeft;
            left.onclick = function() {
                index--;
                if(index < 1) index = 7;
                img.src = "img/" + index + ".jpg";
                changebg();
            }
            var timer = setInterval(moveLeft, 1000);
            var lb = document.getElementsByClassName("lb")[0];
            lb.onmouseover = function() {
                clearInterval(timer);
            };
            lb.onmouseout = function() {
                timer = setInterval(moveLeft, 1000);
            }

第三部分  body部分

<div class="lb">
            <img src="img/1.jpg" id="img" />
            <img src="img/btn_l.png" id="left-arrow" />
            <img src="img/btn_r.png" id="right-arrow" />
            <div id="num-btn">
                <span style="background: #f00;">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
            </div>
        </div>

这三部分结合在一起就实现一个简单的轮播效果

转载于:https://my.oschina.net/u/3631458/blog/1503222