2021-01-06

小白写网页 banner图切换  
 

css样式部分

<style>
    body{ margin:0;  padding: 0;}
    #tabs{ width: 1920px; height: 500px;  overflow: hidden; float: lef; position: relative;}
    #tabs>a:not(:first-child){
        display: none;
    }
</style>

图片框架部分

<div id="tabs">
    <a name="i"  href="#" ><img src="images/banner.jpg"  width="100%"  height="500" /></a>
    <a name="i"  href="#" ><img src="images/banner2.jpg"  width="100%"  height="500" /></a>
    <a name="i"  href="#" ><img src="images/banner.jpg"  width="100%"  height="500" /></a>
    <a name="i"  href="#" ><img src="images/banner2.jpg"  width="100%"  height="500" /></a>
</div>



控制效果部分

<script>
    var len = document.getElementsByName("i");   // 获取 name属性值为 i 的元素
    var pos = 0;   //  定义变量值为 0
    function changeimage() {
        len[pos].style.display = "none";   // 隐藏元素
        pos++; // 变量值加 1
        if (pos == len.length) pos=0;    // 变量值重新定义为 0；
        len[pos].style.display = "block"   //  显示元素
    }
    setInterval('changeimage()',3000);   //  每隔3秒执行一次函数
</script>