自动播放选项卡

Javascript应用（2）

一、自动播放选项卡

1.实现思路：

首先实现选项卡功能
加上定时器，和上一个，下一个按钮，实现自动功能（鼠标移动到上面就会暂停，鼠标移开自动播放）

2.实现选项卡中的注意事项和思路

获取中间五个button，并建立一个空数组，放在建好的空数组中

// 获取中间所有的button
var aButton = document.getElementsByTagName('button');
// 定义一个空数组，存放中间所有的按钮
var aBtn = [];
for (var i = 1; i < aButton.length - 1; i++) {
    aBtn.push(aButton[i]);
}

获取所有的box中的div

var oBox = document.getElementById('box');
var aDiv = oBox.getElementsByTagName('div');

实现切换功能的算法为：首先在点击的时候使用匿名函数清空oBox和aDiv的class，然后给点击的对应的div添加class

// 将所有的div和button的样式全部清空
aBtn[i].onclick = function () {
    for (var j = 0; j < aBtn.length; j++) {
        aBtn[j].className = '';
        aDiv[j].className = '';
    }
    // 给当前的button和div添加class
    this.className = 'active';
    aDiv[this.index].className = 'show';
    // aDiv[i].className = 'show';

3、实现选项卡的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动播放选项卡</title>
    <style>
        .box {
            width: 1050px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .box button {
            width: 120px;
            height: 50px;
            margin-top: 20px;
            font-size: 20px;
            margin-left: 15px;
        }

        .box div {
            margin-top: 20px;
            width: 1050px;
            height: 500px;
            font-size: 40px;
            text-align: center;
            background-color: pink;
            display: none;
        }

        .box .show {
            display: block;
        }

        .box .active {
            width: 140px;
            background-color: tomato;
            color: white;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <button><-</button>
    <button class="active">周杰伦</button>
    <button>林俊杰</button>
    <button>刘德华</button>
    <button>张学友</button>
    <button>陈奕迅</button>
    <button>-></button>
    <div class="show">双节棍、千里之外、七里香</div>
    <div>曹操、豆浆油条、江南</div>
    <div>爱你一万年、冰雨、男人哭吧不是罪</div>
    <div>吻别、 情书、饿狼传说</div>
    <div>十年、爱情呼叫转移、浮夸</div>
</div>
<script>
    // 获取中间所有的button
    var aButton = document.getElementsByTagName('button');
    // 定义一个空数组，存放中间所有的按钮
    var aBtn = [];
    for (var i = 1; i < aButton.length - 1; i++) {
        aBtn.push(aButton[i]);
    }
    // 获取所有的div
    var oBox = document.getElementById('box');
    var aDiv = oBox.getElementsByTagName('div');
    // 给所有的button添加点击事件
    for (var i = 0; i < aBtn.length; i++) {
        // 将当前的i值保存到自定义的属性中
        aBtn[i].index = i;
        // 将所有的div和button的样式全部清空
        aBtn[i].onclick = function () {
            for (var j = 0; j < aBtn.length; j++) {
                aBtn[j].className = '';
                aDiv[j].className = '';
            }
            // 给当前的button和div添加class
            this.className = 'active';
            aDiv[this.index].className = 'show';
            // aDiv[i].className = 'show';
        };
    }
</script>
</body>
</html>

实现上一个下一个按钮功能

首先获取第一个和最后一个button

var oPre = aButton[0];
var oNext = aButton[aButton.length - 1];

定义一个全局变量number记录点击按钮和div的位置

var number = 0; //记录当前显示的哪个按钮和div

定义一个添加类的函数addName

function addName() {
    for (var i = 0; i < aBtn.length; i++) {
        aBtn[i].className = '';
        aDiv[i].className = '';
    }
    aBtn[number].className = 'active';
    aDiv[number].className = 'show';
}

给第一个和最后一个按钮添加点击事件

// 添加事件
oPre.onclick = function () {
    number--;
    if (number === -1) {
        number = aBtn.length - 1;
    }
    addName();
};
oNext.onclick = function () {
    number++;
    if (number === aBtn.length) {
        number = 0;
    }
    addName();
};

第二阶段完整代码（到此已经可以手动操作选项卡了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动播放选项卡</title>
    <style>
        .box {
            width: 1050px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .box button {
            width: 120px;
            height: 50px;
            margin-top: 20px;
            font-size: 20px;
            margin-left: 15px;
        }

        .box div {
            margin-top: 20px;
            width: 1050px;
            height: 500px;
            font-size: 40px;
            text-align: center;
            background-color: pink;
            display: none;
        }

        .box .show {
            display: block;
        }

        .box .active {
            width: 140px;
            background-color: tomato;
            color: white;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <button><-</button>
    <button class="active">周杰伦</button>
    <button>林俊杰</button>
    <button>刘德华</button>
    <button>张学友</button>
    <button>陈奕迅</button>
    <button>-></button>
    <div class="show">双节棍、千里之外、七里香</div>
    <div>曹操、豆浆油条、江南</div>
    <div>爱你一万年、冰雨、男人哭吧不是罪</div>
    <div>吻别、 情书、饿狼传说</div>
    <div>十年、爱情呼叫转移、浮夸</div>
</div>
<script>
    // 获取中间所有的button
    var aButton = document.getElementsByTagName('button');
    // 定义一个空数组，存放中间所有的按钮
    var number = 0; //记录当前显示的哪个按钮和div
    var aBtn = [];
    for (var i = 1; i < aButton.length - 1; i++) {
        aBtn.push(aButton[i]);
    }
    // 获取所有的div
    var oBox = document.getElementById('box');
    var aDiv = oBox.getElementsByTagName('div');
    // 给所有的button添加点击事件
    for (var i = 0; i < aBtn.length; i++) {
        // 将当前的i值保存到自定义的属性中
        aBtn[i].index = i;
        // 将所有的div和button的样式全部清空
        aBtn[i].onclick = function () {
            for (var j = 0; j < aBtn.length; j++) {
                aBtn[j].className = '';
                aDiv[j].className = '';
            }
            // 给当前的button和div添加class
            this.className = 'active';
            aDiv[this.index].className = 'show';
            // 更新number值
            number = this.index;
        };
    }

    // 获取第一个和最后一个按钮
    var oPre = aButton[0];
    var oNext = aButton[aButton.length - 1];
    // 添加事件
    oPre.onclick = function () {
        number--;
        if (number === -1) {
            number = aBtn.length - 1;
        }
        addName();
    };
    oNext.onclick = function () {
        number++;
        if (number === aBtn.length) {
            number = 0;
        }
        addName();
    };

    function addName() {
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].className = '';
            aDiv[i].className = '';
        }
        aBtn[number].className = 'active';
        aDiv[number].className = 'show';
    }
</script>
</body>
</html>

5.添加定时器，实现自动播放

// 定义一个全局的定时器变量
var timer = null;
timer = setInterval(next, 1000);
// 给box定义事件，oBox.onmouseover   ，oBox.onmouseout
oBox.onmouseover = function () {
    clearInterval(timer);
}
oBox.onmouseout = function () {
    timer = setInterval(next, 1000);
}

6.demo的最终代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动播放选项卡</title>
    <style>
        .box {
            width: 1050px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .box button {
            width: 120px;
            height: 50px;
            margin-top: 20px;
            font-size: 20px;
            margin-left: 15px;
        }

        .box div {
            margin-top: 20px;
            width: 1050px;
            height: 500px;
            font-size: 40px;
            text-align: center;
            background-color: pink;
            display: none;
        }

        .box .show {
            display: block;
        }

        .box .active {
            width: 140px;
            background-color: tomato;
            color: white;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <button><-</button>
    <button class="active">周杰伦</button>
    <button>林俊杰</button>
    <button>刘德华</button>
    <button>张学友</button>
    <button>陈奕迅</button>
    <button>-></button>
    <div class="show">双节棍、千里之外、七里香</div>
    <div>曹操、豆浆油条、江南</div>
    <div>爱你一万年、冰雨、男人哭吧不是罪</div>
    <div>吻别、 情书、饿狼传说</div>
    <div>十年、爱情呼叫转移、浮夸</div>
</div>
<script>
    // 获取中间所有的button
    var aButton = document.getElementsByTagName('button');
    // 定义一个空数组，存放中间所有的按钮
    var number = 0; //记录当前显示的哪个按钮和div
    var aBtn = [];
    for (var i = 1; i < aButton.length - 1; i++) {
        aBtn.push(aButton[i]);
    }
    // 获取所有的div
    var oBox = document.getElementById('box');
    var aDiv = oBox.getElementsByTagName('div');
    // 给所有的button添加点击事件
    for (var i = 0; i < aBtn.length; i++) {
        // 将当前的i值保存到自定义的属性中
        aBtn[i].index = i;
        // 将所有的div和button的样式全部清空
        aBtn[i].onclick = function () {
            for (var j = 0; j < aBtn.length; j++) {
                aBtn[j].className = '';
                aDiv[j].className = '';
            }
            // 给当前的button和div添加class
            this.className = 'active';
            aDiv[this.index].className = 'show';
            // 更新number值
            number = this.index;
        };
    }

    // 获取第一个和最后一个按钮
    var oPre = aButton[0];
    var oNext = aButton[aButton.length - 1];
    // 添加事件
    oPre.onclick = function () {
        number--;
        if (number === -1) {
            number = aBtn.length - 1;
        }
        addName();
    };
    oNext.onclick = next;

    function next() {
        number++;
        if (number === aBtn.length) {
            number = 0;
        }
        addName();
    };

    function addName() {
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].className = '';
            aDiv[i].className = '';
        }
        aBtn[number].className = 'active';
        aDiv[number].className = 'show';
    }

    // 定义一个全局的定时器变量
    var timer = null;
    timer = setInterval(next, 1000);
    // 给box定义事件，oBox.onmouseover   ，oBox.onmouseout
    oBox.onmouseover = function () {
        clearInterval(timer);
    }
    oBox.onmouseout = function () {
        timer = setInterval(next, 1000);
    }
</script>
</body>
</html>

Javascript应用（2）

一、 自动播放选项卡

1.实现思路：

2.实现选项卡中的注意事项和思路

3、 实现选项卡的完整代码

实现上一个下一个按钮功能

5.添加定时器，实现自动播放

6.demo的最终代码

相关推荐

一、自动播放选项卡

3、实现选项卡的完整代码