Question

我有一个基本的幻灯片，3张图片，以2.5秒的间隔自动循环。但是，幻灯片显示仅在我的网页顶部，因此它会拉伸图片。我试图将图像大小设置为完整，并使用图像精灵将图像对齐到我喜欢的位置。目前幻灯片正在运行，但图像仍然拉长。有没有办法让幻灯片中的图像不会伸展？

这是我的代码：

<head>
<style type="text/css">
.bgpic {
    height: 50%;
    width: 100%;
}

#pict {
    width: 100%;
    height: 100%;
    background: url('/Junk/1.jpg') 0 -150px;    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>

<script type="text/javascript">
    var image1 = new Image()
    image1.src="/Junk/1.jpg";
    var image2 = new Image()
    image2.src="/Junk/2.jpg";
    var image3 = new Image()
    image3.src="/Junk/3.jpg";
</script>
</head>

<body>
<div class="bgpic">
<img src="/Junk/1.jpg" id="pict" name="slide" style="-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;">
<script type="text/javascript">
    var step=1;
    function slideit() {
    if(!document.images)
    return;
    document.images.slide.src=eval("image"+step+".src")
    document.getElementById("pict").style.backgroundSize="cover";
    if (step<3){
    step++;
    }
    else {
    step=1;
    }
    setTimeout("slideit()", 2500)
    }
    slideit();
</script>
</div>
</body>

我没有尝试过任何工作。请帮忙。

如何在javascript幻灯片中更改图像的背景大小

0 个答案: