CSS图片轮播,父宽度是子宽度的1⼀2,绝对定位,子图片元素全部左浮动,轮播时子图片元素上下而不是左右

2025-04-30 04:41:44
推荐回答(1个)
回答1:

img 不要用浮动

简单点的做法就是 把 img 也设置为 position:absolute;top:0;width:100%;height:100%;

left先不设置 然后用js判断有几个 img 给个循环 js代码大概如下:

//js部分
for(var i = 0 ; i < img.length ; i++){
    //动态设置img的left
    //js
    img.style.left = (i*200)+"px"
}

//补充: 在循环结束后 要设置 #1的width属性为 img.length*200

之后的轮播可以 就改变 #1这个div的 left 属性 每次都是 一张图片的大小 200px 当然应该设置的是 -200px

最好是可以给一个计数器, 现在显示的是第几张图片,再判断如果是最后一张 下一次轮播就播放第一张 也就是 #1 的left = 0

如果不太明白 可以设置 #k的overflow:auto 来看效果。

做了个例子给你参考一下:




    

    
        #k{width:200px; height:280px; position:relative; border:solid 1px #ccc;background-color:#eee; overflow:hidden;}
        #img_box{position:absolute; top:0;left:0;}
        #img_box img{width:200px;height:280px; position:absolute; top:0;}
    

    
        function Onload() {
            var imgs = document.getElementsByTagName("img");
            img_box.style.width = (imgs.length * 200) + "px";
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.left = (i * 200) + "px";
            }
        }
    


    
        
            
            
            
            
        

    


相关问答
最新问答