HTML+CSS实现简单的点击轮播图-蒲公英云

HTML+CSS实现简单的点击轮播图

在这里插入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { 
                padding: 0px;
                margin: 0px;
            }
            .nav { 
                width: 100px;
                height: 100px;
                margin: 100px auto 0px;
            }
            ul { 
                width: 200px;
                height: 100px;
                list-style-type: none;
            }
            ul li { 
                width: 100px;
                height: 100px;
                float: left;
                //为了将每张li里的图片放到第一张的位置
                position: absolute;
            }
            ul li img { 
                width: 100px;
                height: 100px;
            }
            #btn { }
        </style>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><img src="cupon4.png" /></li>
                <li><img src="cupon5.png" /></li>
            </ul>
        </div>
        <div align="center">
            <button id="btn" οnclick="next()">下一张</button>
        </div>
        <script>
            var flag = 0;
            var lis = document.getElementsByTagName("li");
            lis[0].style.opacity = "1";
            lis[1].style.opacity = "0"; function next () { 
                /* window.alert("测试代码块！！"); */
                /* 1.通过document对象 获取标签对象 */
                //lis 一组li { 第1张，第2张}   默认 // 0 1 if (flag === 0) { 
                    var n = 0; while (n < lis.length) { 
                        if (n === 1) { 
                            lis[n].style.opacity = "1";
                        } else { 
                            lis[n].style.opacity = "0";
                        }
                        n++;
                    }
                    flag = 1;
                } else { 
                    var n = 0; while (n < lis.length) { 
                        if (n === 0) { 
                            lis[n].style.opacity = "1";
                        } else { 
                            lis[n].style.opacity = "0";
                        }
                        n++;
                    }
                    flag = 0;
                }
            }
        </script>
    </body>
</html>
代码片