滑动轮播图

这是结构

 <div id="cont">

        <div class="lii"></div>
        <div class="btn" id="btn">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <div style="clear: both"></div>
            </ul>
        </div>
        <div class="imm" id="imm">
            <a href="1" target="_blank"> <img width="100%" src="./a1.jpg" alt="一"></a>
            <a href="2" target="_blank"> <img width="100%" src="./a2.jpg" alt="二"></a>
            <a href="3" target="_blank"> <img width="100%" src="./a3.jpg" alt="三"></a>
            <a href="4" target="_blank"><img width="100%" src="./a4.jpg" alt="四"></a>
        </div>
        <div id="jiao">
            <a href="#" id="left">&lt;</a>
            <a href="#" id="right">&gt;</a>
        </div>
    </div>

这是样式：

*{
    margin: 0;
    padding: 0;
    list-style-type:none;
}
a,img{border:0;}
#cont{
    position: relative;
    width: 730px;
    height: 454px;
    margin:40px auto 0 auto;
}
.imm a{position: absolute;width: 100%;}
.btn ul {
    position: absolute;
    z-index: 10000;
    bottom: 40px;
    right: 20px;

}
.btn ul li{
    width: 20px;
    height: 20px;
    background-color: #cccccc;
    border-radius: 50%;
    list-style: none;
    float: left;
    margin: 0 5px;
    text-align: center;
    color: white;
    line-height: 20px;
    cursor: pointer;
}
.btn ul li.on{
    background-color: aquamarine;
}
.diin{
    width: 100%;
    height: 30px;
    background-color: black;
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    color: white;
    z-index: 10000;
}
#jiao{
    display: none;
}
#left{
   width: 35px;
   height: 50px;
   background-color: #555555;
   opacity: 0.6;
   z-index: 9999;
   display: block;
   position: absolute;
   top: 50%;
   left: 20px;
   color: white;
   font-size: 20px;
   line-height: 50px;
   text-align: center;
   text-decoration: none;
}
#right{
    width: 35px;
    height: 50px;
    background-color: #555555;
    opacity: 0.6;
    z-index: 9999;
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    color: white;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
}

这是js代码

var tt = null;
        var kkk;
        var n = 0;
        var timer = 0;
        window.onload = function () {
            var li = document.getElementById("btn").getElementsByTagName("li");
            kkk = document.getElementById("imm").getElementsByTagName("a");
            for (var i = 0; i < kkk.length; i++) {
                if (i != 0) {
                    kkk[i].style.opacity = 0;
                }
            }
            for (var j = 0; j < li.length; j++) {
                li[j].onmouseover = function () {
                    var that = this;
                    tt = setTimeout(function () {
                        var index = that.innerHTML - 1;
                        n = index;
                        if (index < kkk.length) {
                            for (var o = 0; o < li.length; o++) {
                                li[o].className = "";
                                kkk[o].style.opacity = 0;
                                kkk[o].style.zIndex = 9998;
                            }
                            that.className = "on";
                            kkk[index].style.opacity = 1;
                            kkk[index].style.zIndex = 9999;
                            kkk[index].style.transition = "opacity 0.8s";
                            leftf(-300, 0, kkk[index]);
                        }
                    }, 100);

                };
                li[j].onmouseout = function () {
                    clearTimeout(tt)
                }
            }
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            var jiao = document.getElementById("jiao");
            var body = document.getElementById("cont");
            timer = setInterval("autoplay()", 2000);
            body.onmouseover = function () {
                jiao.style.display = "block";
                clearInterval(timer);
            };
            body.onmouseout = function () {
                jiao.style.display = "none";
                timer = setInterval("autoplay()", 2000);
            };
            left.onclick = function () {
                if (n > 0) {
                    n--
                } else if (n == 0) {
                    n = kkk.length - 1;
                }
                var li = document.getElementById("btn").getElementsByTagName("li");
                li[n].onmouseover()
            };
            right.onclick = function () {
                n = n >= (kkk.length - 1) ? 0 : ++n;
                var li = document.getElementById("btn").getElementsByTagName("li");
                li[n].onmouseover()
            }
        };
        function leftf(start, end, ele) {
            var tt = setInterval(function () {
                start += 10;
                ele.style.left = start + "px";
                if (start == end) {
                    clearInterval(tt)
                }
            }, 20)
        }

        function autoplay() {
            n = n >= (kkk.length - 1) ? 0 : ++n;
            var li = document.getElementById("btn").getElementsByTagName("li");
            li[n].onmouseover()
        };