轮播图

//轮播图(自动轮播,鼠标移上底部小图标切换)
function imgauto(parentId, childN, LMimgs, LMlis) {
    var x = 0, y = 1;
    var firstimg = childN.children[0].cloneNode(true);
    var lastimg = childN.children[LMimgs.length - 1].cloneNode(true);
    childN.appendChild(firstimg);
    childN.insertBefore(lastimg, childN.children[0]);
    var timer = null, timer2 = null;
    parentId.scrollLeft = LMimgs[0].clientWidth;
    console.log(LMimgs[0].clientWidth)
    function smove() {
        var minstep = 0;
        var maxstep = 20;
        var start = parentId.scrollLeft;
        var end = y * LMimgs[0].clientWidth;
        var change = end - start;
        var everystep = change / maxstep;
        clearInterval(timer2);
        timer2 = setInterval(function () {
            minstep++;
            start += everystep;
            if (minstep >= maxstep) {
                clearInterval(timer2);
            }
            parentId.scrollLeft = start;

        }, 60);
        for (var i = 0; i < LMlis.length; i++) {
            LMlis[i].className = '';
        }
        LMlis[x].className = 'one';

    }
    function smoveauto() {
        clearInterval(timer);
        timer = setInterval(function () {
            x++;
            if (x >= LMlis.length) {
                x = 0;
            }
            y++;
            if (y >= LMimgs.length) {
                y = 2;
                parentId.scrollLeft = LMimgs[0].clientWidth;
            }

            smove();
        }, 4000);

    }
    smoveauto();
    for (var i = 0; i < LMlis.length; i++) {
        LMlis[i].index = i;
        LMlis[i].onmouseenter = function () {
            x = this.index;
            y = this.index + 1;
            smove();
            smoveauto();
        }
    }

};

 

 var sitw1 = document.getElementById('thirdWrap'),
                situn = document.getElementById('thirdCon'),
                simgs = situn.getElementsByTagName('img'),
                sLisT = document.getElementById('thirdTag'),
                slis = sLisT.getElementsByTagName('li');
              imgauto(sitw1, situn, simgs, slis);

<div class="thirdHeaderWaiLm" id="thirdWrap">
          <div class="thrdHeaderNeiLm" id="thirdCon">
          <img src="http://otqmd5q2x.bkt.clouddn.com/100472" alt=""><img src="http://otqmd5q2x.bkt.clouddn.com/100472" alt=""><img src="http://otqmd5q2x.bkt.clouddn.com/100472" alt=""></div>
          <!-- <ul class="indexTag" id="thirdTag">
            <li class="one"></li>
            <li></li>
            <li></li>
          </ul> -->
        </div>