图片滑动，每次移动一个

这东西几行代码就写完了，一些插件写得那么多，吓人

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多张图片转换</title>
</head>
<body>
<div id="box">
    <div id="pre" class="tip"><a href="javascript:;"><</a></div>
    <ul>
        <li><img src="image/P_000.jpg" alt="P_000"/></li>
        <li><img src="image/P_001.jpg" alt="P_001"/></li>
        <li><img src="image/P_002.jpg" alt="P_002"/></li>
        <li><img src="image/P_010.jpg" alt="P_010"/></li>
        <li><img src="image/P_012.jpg" alt="P_012"/></li>
        <li><img src="image/P_014.jpg" alt="P_014"/></li>
        <li><img src="image/P_015.jpg" alt="P_015"/></li>

    </ul>
    <div id="next" class="tip"><a href="javascript:;">></a></div>
</div>
<script>
    var opre = document.getElementById('pre');
    var onext = document.getElementById('next');
    var obox = document.getElementById('box');
    var oul = obox.getElementsByTagName('ul')[0];
    var oli = oul.getElementsByTagName('li');
    opre.addEventListener('click', function () {
        oul.appendChild(oli[0]);
    });
    onext.addEventListener('click', function () {
        var len = oli.length - 1;
        oul.insertBefore(oli[len], oli[0]);
    })
</script>
</body>
</html>

全部代码在https://github.com/ralcen/jquery/blob/master/test-picsslide.html 预览地址http://ralcen.github.io/dome/test-picsslide.html

部署静态网页到GitHub 注册设置GitHub

登录GitHub，注册自定义用户名如wsgzao
在主页右下角创建New repository，name必须和用户名一致如wsgzao.github.io
首次创建耐心等待10分钟左右审核，之后即可访问静态主页如http://wsgzao.github.io

图片滑动，每次移动一个

评论