动态更新网页照片

时间:2018-03-21 09:24:20

标签: javascript html css

首先,我想说我对javascript很新,所以我会请你不要批评我。

我想知道,如何实现网页图片的动态更新,它应该从其他网页加载照片。我正在使用javascript并实现了一些功能,但它没有提供所需的结果。

我在网上搜索过,但没有任何东西符合上述要求。

因此,有人可以帮我找出解决问题的方法吗?

<script>
        var imageRep = document.createElement('img'), src='http://www.free.fr/freebox/im/logo_free.png';

        var parent=document.getElementById("div1");
        var child=document.getElementById('change').src;
        parent.replaceChild(imageRep,child);

    </script>

这是html部分:

 <a href="story-ck.html">
            <div class="mix mix-story europe asia" id="div1">
            <img src="img/hero/ck.jpg" style="width: 100%;" id="change">

5 个答案:

答案 0 :(得分:1)

&#13;
&#13;
var change = document.getElementById('change');
function changeImg(){
change.src = 'http://s5.tinypic.com/98yjb6_th.jpg'
}
&#13;
 <img src="http://s6.tinypic.com/id6u77_th.jpg" style="width: 100%;" id="change">" 
 <button onClick='changeImg()'>change image</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

var imageRep = document.createElement('img');
imageRep.src = 'http://www.free.fr/freebox/im/logo_free.png';
var oldImage = document.getElementById('change');
parent.replaceChild(imageRep, oldImage);

虽然如果您想多次执行此操作,并且如果没有任何事情阻止您这样做,那么更换目标图像元素的.src会更容易,而不是完全替换图像:

document.querySelector('#change').src = 'http://www.free.fr/freebox/im/logo_free.png';

答案 2 :(得分:0)

只需更改src属性并将其值设置为新图片网址:

var image = document.getElementById('change');
image.src = 'http://www.free.fr/freebox/im/logo_free.png';

答案 3 :(得分:0)

&#13;
&#13;
var current=0;
var images = ["1.jpg", "2.jpg", "3.jpg"];

setInterval(function(){
document.getElementById('main').src=images[current++%images.length];
},2000);
&#13;
<img src="" id="main">
&#13;
&#13;
&#13;

这是处理图像旋转的明确方法。

答案 4 :(得分:0)

你需要jquery ..

$(div).html("<img src='Image name'");

这会通过将html标记推送到您的网页来动态更改您的内容