js图片轮播的实现

原创于 2018-10-22 16:09:49 发布 · 339 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function change(){
            document.write('<div id="firstimg" style="height: 100px;width: 100px;background-image: url(t1.jpg);background-size: cover">');
            document.write('<div>');
            document.write('<button style="margin-top:110px;margin-left: 40px" onclick="second()">下一张</button>');
        }
        var index=1;
        function second(){
                var img = document.getElementById('firstimg');
//                注意图片切换图片轮播就可以用模的方式添加不同的图片，而不是固定死了的图片
                img.style.backgroundImage = 'url(t'+((index++)%3+1)+'.jpg)';
        }
        change();
    </script>
</head>
<body>

</body>
</html>