Question

嗨我正在尝试在页面加载时更改图库中的图像。我想按照这里发布的最多的方式来做这件事

function changeImg(){
            var img1 =  document.getElementById("wows1_0");                
            img1.src = "WOWSlider/data1/images/ContactSupport.jpg";
        }

然后在这里打电话

<body onload="changeImg()">

这是我的画廊的代码

<div id="wowslider-container1" class="grid_7 alignGallery">
<div class="ws_images"><ul>
        <li><img src="WOWSlider/data1/images/BookARoom.jpg" alt="full screen slider" title="full screen slider" id="wows1_0"/></li>
        <li><img src="WOWSlider/data1/images/ContactSupport.jpg" alt="ContactSupport" title="ContactSupport" id="wows1_1"/></li>
    </ul></div>
<div class="ws_thumbs">
    <div>
        <a href="#wows1_0" title="full screen slider"><img src="WOWSlider/data1/tooltips/bookaroom.jpg" alt="" /></a>
        <a href="#wows1_1" title="ContactSupport"><img src="WOWSlider/data1/tooltips/contactsupport.jpg" alt="" /></a>
    </div>
</div>               
<div class="ws_shadow"></div>

但每次调用函数时图像都不会改变。

如果有人能提供任何指导或帮助，我将非常感激。

Answer 1

您需要先预先加载图片：

var images = new Array()
function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
            images[i] = new Image()
            images[i].src = preload.arguments[i]
    }
}
preload(
    "WOWSlider/data1/images/ContactSupport.jpg",
    "WOWSlider/data1/images/OtherImage.jpg"
);

Answer 2

首先，移除body onLoad。其次，这应该是你的html脚本：

<body>
<div id="wowslider-container1" class="grid_7 alignGallery">
    <div class="ws_images">
        <ul>
            <li><img src="WOWSlider/data1/images/BookARoom.jpg" alt="full screen slider" title="full screen slider" id="wows1_0"/></li>
            <li><img src="WOWSlider/data1/images/ContactSupport.jpg" alt="ContactSupport" title="ContactSupport" id="wows1_1"/></li>
        </ul>
    </div>
    <script type="text/javascript">
        changeImg();
    </script>
    <div class="ws_thumbs">
        <div>
            <a href="#wows1_0" title="full screen slider"><img src="WOWSlider/data1/tooltips/bookaroom.jpg" alt="" /></a>
            <a href="#wows1_1" title="ContactSupport"><img src="WOWSlider/data1/tooltips/contactsupport.jpg" alt="" /></a>
        </div>
    </div>               
    <div class="ws_shadow"></div>
</body>

这应该是你的javascript：

function changeImg(){
    var img1 =  document.getElementById("wows1_0");            
    img1.src = "WOWSlider/data1/images/ContactSupport.jpg";
}

Answer 3

我会在结束body标记之前用javascript替换onload事件你在寻找这样的东西吗？

var $img = document.getElementById('yourImg');
var path = 'http://your-new-path-to-image.com';
$img.src = path;
// or
// $img.setAttribute('src', path);

http://codepen.io/codelabr/pen/RNZobB

祝你好运

通过JavaScript更改Img Src

3 个答案: