JS 实现 左轮播

图片随便搜的（侵删）

CSS

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #focus{
            overflow: hidden;
            position: relative;
            width: 1100px;
            height: 458px;
            margin: 100px auto;
        }
        #focus #dot{
            position: absolute;
            float: left;
            left: 0;
            bottom: 0;
            height: 35px;
            width: 1100px;
        }
        #focus #dot div{
            position: absolute;
            width: 272px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            background-color: rgba(0,0,0,0.6);
            color: white;
            float: left;
            margin-left: 1px;
            cursor: pointer;
            bottom: 0;
        }
        #focus #dot div:nth-child(1){
            left: 0;
        }
        #focus #dot div:nth-child(2){
            left: 276px;
        }
        #focus #dot div:nth-child(3){
            right: 276px;
        }
        #focus #dot div:nth-child(4){
            right: 0;
        }
        #focus #aImg{
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
            width: 400%;
            height: 458px;
            transition: all ease 0.7s;
        }
        #focus #aImg li{
            float: left;
            width: 1100px;
            height: 458px;
        }
        #focus #aImg li img{
            width: 100%;
        }
    </style>

html

<div id="focus">
    <ul id="aImg">
        <li><img src="img/shouye1.jpg" alt=""></li>
        <li><img src="img/shouye5.jpg" alt=""></li>
        <li><img src="img/shouye3.jpg" alt=""></li>
        <li><img src="img/shouye4.jpg" alt=""></li>
    </ul>

    <div id="dot">
        <div>美好尽在大自然</div>
        <div>大自然地暖实木地板</div>
        <div>向往的美好</div>
        <div>我爱大自然</div>
    </div>
</div>

JS

<script>
    var focus = document.getElementById("focus");
    var aImg = document.getElementById("aImg");
    var iImg = aImg.getElementsByTagName("li");
    var dot = document.getElementById("dot");
    var btn = dot.getElementsByTagName("div");

    var dist = 0;
    btn[dist].style.background = "#e64347";
    btn[dist].style.height = "45px";
    btn[dist].style.lineHeight = "45px";



    //浮动到按钮时，显示对应的图片
    for(var j = 0;j < btn.length;j++){
        btn[j].index = j;
        btn[j].onmouseover= function (){
           dist = this.index;
           show();
        }
    }

    //计时器 自动轮播
    var timer = setInterval(function () {
        dist++;
        show();
    },3000);
    focus.onmouseover = function () {
        clearInterval(timer);
    };
    focus.onmouseout = function () {
            timer = setInterval(function () {
            dist++;
            show();
        },3000);
    };
    function show() {
        if(dist == iImg.length){dist = 0}
        for(var i = 0;i < btn.length;i++){
            btn[i].style.background = "";
            btn[i].style.height = "35px";
            btn[i].style.lineHeight = "35px";
        }
        aImg.style.left = "-" +dist*1100+ "px";
        btn[dist].style.background = "#e64347";
        btn[dist].style.height = "45px";
        btn[dist].style.lineHeight = "45px";
    }