<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title></title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? padding: 0;
? ? ? ? ? ? }
? ? ? ? ? ? ul,li{
? ? ? ? ? ? ? ? list-style: none;
? ? ? ? ? ? }
? ? ? ? ? ? .wrap{
? ? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? ? width: 500px;
? ? ? ? ? ? ? ? height: 140px;
? ? ? ? ? ? ? ? margin: 50px auto 0;
? ? ? ? ? ? ? ? background: #00CCCC;
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? }
? ? ? ? ? ? .wrap ul{
? ? ? ? ? ? ? ? width: 500%;
? ? ? ? ? ? }
? ? ? ? ? ? .wrap li{
? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? ? ? width: 100px;
? ? ? ? ? ? ? ? height: 140px;
? ? ? ? ? ? ? ? background: #ABCDEF;
? ? ? ? ? ? ? ? margin: 10px;
? ? ? ? ? ? }
? ? ? ? ? ? .left, .right{
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? width: 30px;
? ? ? ? ? ? ? ? height: 30px;
? ? ? ? ? ? ? ? top: 55px;
? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? ? ? background: #008000;
? ? ? ? ? ? ? ? color: white;
? ? ? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? }
? ? ? ? ? ? .right{
? ? ? ? ? ? ? ? right: 0;
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <div class="wrap">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>1</li>
? ? ? ? ? ? ? ? <li>2</li>
? ? ? ? ? ? ? ? <li>3</li>
? ? ? ? ? ? ? ? <li>4</li>
? ? ? ? ? ? ? ? <li>5</li>
? ? ? ? ? ? ? ? <li>6</li>
? ? ? ? ? ? ? ? <li>7</li>
? ? ? ? ? ? ? ? <li>8</li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <div class="left"><</div>
? ? ? ? ? ? <div class="right">></div>
? ? ? ? </div>
? ? ? ? <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? var $ul = $("ul"), $left = $(".left"), $right = $(".right");
? ? ? ? ? ? $left.on("click", () => {
? ? ? ? ? ? ? ? $ul.append($ul.find("li:first"));
? ? ? ? ? ? });
? ? ? ? ? ? $right.on("click", () => {
? ? ? ? ? ? ? ? $ul.prepend($ul.find("li:last"));
? ? ? ? ? ? });
? ? ? ? </script>
? ? </body>
</html>
