js轮播图(适用于PC)

• 实现自动左右轮播
• 鼠标移入停止轮播，鼠标移开继续轮播
• prev next点击左右切换
• 点击下边导航可以跳转到相应的页

首先引入自己封装的简单的js运动库 move.js

<script src="move.js"></script>

function getStyle(obj, name) {

    if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            return getComputedStyle(obj, false)[name];
        }
    }
    
    function startMove(obj, attr, iTarget) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var cur = 0;
            if (attr == 'opacity') {
                cur = parseFloat(getStyle(obj, attr)) * 100;
            } else {
                cur = parseInt(getStyle(obj, attr));
            }
            var speed = parseInt(iTarget - cur) / 6;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (cur == iTarget) {
                clearInterval(obj.timer);
            } else {
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
                    obj.style.opacity = (cur + speed) / 100;
                } else {
                    obj.style[attr] = cur + speed + 'px';
                }
            }
        }, 30);
    }

javascript代码如下：

function getByClass(oParent, sClass) {
    var aEle = oParent.getElementsByTagName('*');
    var aResult = [];
    for (var i = 0; i < aEle.length; i++) {
        if (aEle[i].className = sClass) {
            aResult.push(aEle[i]);
        }
        return aResult;
    }
}
window.onload = function() {
    var con = document.getElementById('container');
    var bd = document.getElementById('bd');
    var oUl = bd.querySelector('ul');
    var oLi = bd.querySelectorAll('li');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var hd = document.getElementById('hd');
    var piont = hd.getElementsByTagName('span');
    var nowNav = document.querySelector('.nowNav');
    var op = oLi[0].offsetWidth;
    var move = null;
    var speed = 0;
    var now = 0;
    var navi = 1;
    document.querySelector('.navig').innerHTML = oLi.length;
    oUl.style.width = op * oLi.length + 'px';
    // 鼠标滑过时停止轮播；滑出式又开始轮播
    con.onmouseover = function() {
        clearInterval(move);
    };
    con.onmouseout = function() {
        autoMove();
    };
    // 点击上边的点，跳到相应的页面
    for (var i = 0; i < piont.length; i++) {
        piont[i].index = i;
        piont[i].onmouseover = function() {
            // console.log(oUl.offsetLeft);
            now = this.index;
            tab();
        }
    }
    // 点击上边的点，跳到相应的页面函数
    function tab() {
        for (var i = 0; i < piont.length; i++) {
            piont[i].className = '';
        }
        piont[now].className = 'cur';
        startMove(oUl, 'left', -1200 * now);
    }
    // 点击向前一页
    prev.onclick = function() {
        speed -= op;
        if (oUl.offsetLeft >= 0) {
            speed = 3600;
        }
        moving();
        now--;
        if (now == -1) {
            now = piont.length - 1;
        }
        tab();
        if (navi < 2) {
            navi = 5;
        }
        nowNav.innerHTML = navi-1;
        navi--;
    }
    // 点击向后一页
    next.onclick = function() {
        speed += op;
        if (oUl.offsetLeft <= -3600) {
            speed = 0;
        }
        moving();
        now++;
        if (now == piont.length) {
            now = 0
        }
        tab();
        navi++;
        if (navi > 4) {
            navi = 1;
        }
        nowNav.innerHTML = navi;
    }
    // 轮播的函数
    function moving() {
        startMove(oUl, 'left', -speed);
    }
    // 自动轮播 轮播间隔时间3000
    function autoMove() {
        move = setInterval(next.onclick, 3000);
    }
    autoMove();

html代码如下：

<div class="container" id="container">
    <div id="bd">
        <ul>
            <li><img src="images/0.jpg" alt=""></li>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
        </ul>
    </div>
    <div class="control" id="control">
        <span class="prev" id="prev">&lsaquo;</span>
        <span class="next" id="next">&rsaquo;</span>
    </div>
    <p class="navigtion"><span class="nowNav">1</span>/<span class="navig"></span></p>
    <div id="hd">
        <span class="cur"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

css代码如下：

body {
        margin: 0;
        padding: 0;
    }
    
    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .container {
        position: relative;
        width: 1200px;
        height: 610px;
        margin: 150px auto;
        overflow: hidden;
    }
    
    .container #bd ul,
    .container #bd li {
        height: 100%;
    }
    
    .container #bd ul {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .container #bd li {
        float: left;
        width: 1200px;
    }
    
    .container #bd li img {
        height: 100%;
        width: 100%;
    }
    
    .control span {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 19;
        width: 32px;
        height: 32px;
        margin: auto;
        background: #ff0;
        font-size: 32px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
    
    .control span.next {
        right: 0;
    }
    
    #hd {
        position: absolute;
        z-index: 29;
        width: 20%;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 2%;
        text-align: center;
    }
    
    #hd span {
        width: 10px;
        height: 10px;
        background: #f00;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
    }
    
    #hd .cur {
        background: #ff0;
    }
    
    .navigtion {
        position: absolute;
        bottom: 3%;
        width: 10%;
        /* margin: 0 auto; */
        display: block;
        text-align: center;
        left: 45%;
    }