Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;padding: 0;
        }
        #div1 {
            position: relative;
            width: 712px;
            height: 108px;
            margin: 50px auto;
            overflow: hidden;
            background: red;
        }
        #div1 ul {
            position: absolute;
            left: 0;
            top: 0;
            transition: .3s ease-out;
        }
        #div1 ul li {
            float: left;
            width: 178px;
            height: 108px;
            list-style: none;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
            function moveRight() {
                if(oUl.offsetLeft >= 0) {
                    oUl.style.left = -(aLi.length-4)*178 + 'px';
                    return true;
                }
                oUl.style.left = oUl.offsetLeft + 178 + 'px';
            }
            function moveLeft() {
                if(oUl.offsetLeft <= -(aLi.length-4)*178) {
                    oUl.style.left = '0px';
                    return true;
                }
                oUl.style.left = oUl.offsetLeft - 178 + 'px';
            }
            document.getElementsByTagName('a')[0].onclick = function() {
                setTimeout(moveLeft);
            };
            document.getElementsByTagName('a')[1].onclick = function() {
                setTimeout(moveRight);
            };
        }
    </script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
    <ul>
        <li><img src="http://placekitten.com/g/200/300" alt=""/></li>
      <li><img src="http://placekitten.com/g/200/300" alt=""/></li>
      <li><img src="http://placekitten.com/g/200/300" alt=""/></li>
      <li><img src="http://placekitten.com/g/200/300" alt=""/></li>
      <li><img src="http://placekitten.com/g/200/300" alt=""/></li>
      <li><img src="http://placekitten.com/g/200/300" alt=""/></li>
      <li><img src="http://placekitten.com/g/200/300" alt=""/></li>
    </ul>
</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers