轮播图

<div id="flash">
    <a href="javascript:void(0)" id="prev"><img src="../images/left_icon.png" alt=""></a>
    <a href="javascript:void(0)" id="next"><img src="../images/right_icon.png" alt=""></a>
    <ul id="play">
        <li style="display: block;">
            <img src="../images/banner1.png" alt="" />
            <div class="banner_content color_white">
                <p class="banner_title f40">题目题目题目题目题目题目题目题目题目</p>
                <p class="col_2 f18 banner_info">题目题目题目题目题目</p>
                <a href="javascript:;" class="f16 color_fb bg_08 banner_btn">题目题目题目题目</a>
            </div>
        </li>
        <li>
            <img src="../images/banner2.png" alt="" />
            <div class="banner_content banner_right_content color_white list">
                <div class="col_offset_6 col_2 banner_right_info">
                   <p class="banner_title f40">题目题目题目题目题目题目题目题目题目</p>
                <p class="col_2 f18 banner_info">题目题目题目题目题目</p>
                <a href="javascript:;" class="f16 color_fb bg_08 banner_btn">题目题目题目题目</a>
                </div>
            </div>
        </li>
        <li>
            <img src="../images/banner3.png" alt="" />
            <div class="banner_content banner_right_content color_white">
               <p class="banner_title f40">题目题目题目题目题目题目题目题目题目</p>
                <p class="col_2 f18 banner_info">题目题目题目题目题目</p>
                <a href="javascript:;" class="f16 color_fb bg_08 banner_btn">题目题目题目题目</a>
            </div>
        </li>
        <li>
            <img src="../images/banner4.png" alt="" />
            <div class="banner_content banner_right_content color_white list">
                <div class="col_offset_6 col_2 banner_right_info">
                    <p class="banner_title f40">题目题目题目题目题目题目题目题目题目</p>
                <p class="col_2 f18 banner_info">题目题目题目题目题目</p>
                <a href="javascript:;" class="f16 color_fb bg_08 banner_btn">题目题目题目题目</a>
                </div>
            </div>
        </li>
    </ul>
    <ul id="button" class="t_center">
        <li><div style="background: #ffffff;"></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>
</div>
<style>
/* 轮播图 */
#flash {width:auto;height:500px;position:relative;overflow:hidden;}
#flash #play {margin:0;}
#flash #play li {display:none;position:absolute;top:0px;left:0px;}
#flash #play li img {float:left;height:500px;width: 100%;object-fit: cover;}
#button {position: absolute;bottom: 20px;display: inline-block;width: 100%;}
#button li {margin-left:10px;display: inline-flex;}
#button li div {width:80px;height:5px;background:#cccccc;border-radius:2px;cursor:pointer;}
#prev {left:-60px;}
#next {right:-60px;}
#flash:hover #prev {left:30px;}
#flash:hover #next {right:30px;}
#prev,#next {display: block;z-index: 999;position: absolute;top: 50%;}
.banner_content {position: absolute;width: 1200px;margin-right: auto;margin-left: auto;left: 50%;transform: translate(-50%,-50%);top: 47%;}
.banner_right_content {top: 50%;}
.banner_right_info{padding-left: 90px;}
.banner_title{font-family: "STHeiti";margin-bottom: 15px;}
.banner_info {line-height: 2;}
.banner_title{line-height: 70px;}
.banner_btn{border-radius: 20px;padding: 8px 34px;}
.banner_btn:hover{background-color: #ffdc49!important;}
</style>
 <script>
    // 轮播图
    var oPlay = document.getElementById('play');
    var aLi = oPlay.getElementsByTagName('li');
    var oButton = document.getElementById('button');
    var aDiv = oButton.getElementsByTagName('div');
    var oPrev = document.getElementById('prev');
    var oNext = document.getElementById('next');
    var oFlash = document.getElementById('flash');
    var now = 0;
    var timer = null;
    for (var i = 0; i < aDiv.length; i++) {
        aDiv[i].index = i;
        aDiv[i].onclick = function () {
            if (now == this.index) return;
            now = this.index;
            tab();
        }
    }
    function tab() {
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].style.display = 'none';
        }
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].style.background = "#cccccc";
        }
        aDiv[now].style.background = '#ffffff';
        aLi[now].style.display = 'block';
    }
    oPlay.onmouseover = function () {
        clearInterval(timer);
    };
    oPlay.onmouseout = function () {
        timer = setInterval(oNext.onclick, 3000);
    };
    oPrev.onclick = function () {
        now--;
        if (now == -1) {
            now = aDiv.length - 1;
        }
        tab();
    }
    oNext.onclick = function () {
        now++;
        if (now == aDiv.length) {
            now = 0;
        }
        tab();
    }
    timer = setInterval(oNext.onclick, 3000);
</script>