轮播图与定时器

• js

/*轮播图*/
var ul = document.getElementById("index-scrollImg");
ul.style.left = "0px";
var nextBtn = document.getElementById("nextBtn").onclick = function () {
    var left = 0;
    var ul = document.getElementById("index-scrollImg");
    if(ul.style.left == "-1000px"){
        left = 0;
    }
    else {
        left = parseInt(ul.style.left)-500;
    }
    ul.style.left = left +"px";
    console.log(left);
};
var preBtn = document.getElementById("preBtn").onclick = function () {
    var left = 0;
    var ul = document.getElementById("index-scrollImg");
    if(ul.style.left == "0px"){
        left = -1000;
    }
    else {
        left = parseInt(ul.style.left) + 500;
    }
    ul.style.left = left +"px";
    console.log(left);
};
/*定时轮播图*/
function rigthPlay() {
    var left = 0;
    var ul = document.getElementById("index-scrollImg");
    if(ul.style.left == "0px"){
        left = -1000;
    }
    else {
        left = parseInt(ul.style.left) + 500;
    }
    ul.style.left = left +"px";
}
function autoPlay() {
    var time = setInterval("rigthPlay()",3000);
}

/*加载函数*/
function onLoad() {
    loadNews();
    autoPlay();
}

• css

/*轮播图*/
.scrollImg {
    width:500px;
    height: 330px;
    position: relative;
    float: left;
    margin-right: 15px;
    cursor: pointer;
    overflow: hidden;
}

#index-scrollImg {
    width: 100%;
    height: 100%;
    position: relative;
}
.ulImg {
    width: 300%;
    height: 100%;
    float: left;
    position: absolute;
}
.ulImg li {
    float: left;
}


#index-scrollImg img {
    width:500px;
    height: 330px;
}
.radius {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 6px;
    z-index: 2;
    list-style-type: none;
}
.radius li {
    display: inline-block;
    margin: 0 3px;
}
.radius a {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #979797;
}
.pre {
    display: none;
    width: 32px;
    height: 44px;
    position: absolute;
    left: 0;
    top: 150px;
    font-size: 30px;
}
.next {
    display: none;
    width: 32px;
    height: 44px;
    position: absolute;
    right: 0;
    top: 150px;
    font-size: 30px;
}
.scrollImg:hover .pre{
    background-color: rgba(151,151,151,.7);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scrollImg:hover .next{
    background-color: rgba(151,151,151,.7);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

• html

  <!--轮播图-->
                    <div class="scrollImg">
                        <div id="index-scrollImg">
                            <ul class="ulImg">
                                <li><img src="../image/banner1.jpg"></li>
                                <li><img src="../image/banner2.jpg"></li>
                                <li><img src="../image/banner3.jpg"></li>
                            </ul>
                        </div>
                        <ul class="radius">
                            <li><a href=""></a></li>
                            <li><a href=""></a></li>
                            <li><a href=""></a></li>
                        </ul>
                        <div class="pre" id="preBtn"> < </div>
                        <div class="next" id="nextBtn"> > </div>
                    </div>