JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lol</title>
    <!--以下是此頁的CSS-->
        <link rel="stylesheet" href="index.css">
    <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!--ICON的CDN-->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
       
        <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- jq的CDN -->
            <script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>    
              
        <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!--以下此頁的JS -->
            <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <div class="banner">
        <ul id="banner_ul">
            <li class="banner_li"><a class="banner_a"><img src="image/banner/banner1.jpg"></a></li>
            <li class="banner_li"><a class="banner_a"><img src="image/banner/banner2.jpg"></a></li>
            <li class="banner_li"><a class="banner_a"><img src="image/banner/banner3.jpg"></a></li>
            <li class="banner_li"><a class="banner_a"><img src="image/banner/banner4.jpg"></a></li>
            <li class="banner_li"><a class="banner_a"><img src="image/banner/banner5.jpg"></a></li>
            <li...

CSS

.banner{
    width: 1215px;
    overflow: hidden;
    position: relative;
}
#banner_ul{
    width: 9720px;
    height: 100%;
    padding: 0;
    transition: all 2s;
    
}
.banner_li{
    list-style-type: none;
    float: left;
}

JavaScript

var count = 0;
var isgo = false;
var timer;

showtime();

window.onload = function(){
    var banner_ul = document.getElementById("banner_ul")[0];
    var banner_li = document.getElementsByClassName("banner_li");
}
        function showtime() {
            timer = setInterval(function () {
                if (isgo === false) {
                    count++;
                    banner_ul.style.transform = "translate(" + -1215 * count + "px)";
                        if(count > banner_li.length - 1){
                            console.log("ABCAFDASDFASDASD");
                        }
                }
                else {
                    count--;
                    banner_ul.style.transform = "translate(" + -1215 * count + "px)";
                    if (count <= 0) {
                        count = 0;
                        isgo = false;
                    }
                }
                },3000);
}