Question

<div id="div1" class="index-speaker-img">

 <img id="image1" src="" onmouseout="hide(this,'keynote2')" onmouseover="show(this,'keynote2')" width="30%" class="fl"/>

<div id="keynote2" class="tip1" style="display:none;top:22%;left:2%;" onmouseout="hidePop(this,'keynote6')" onmouseover="showPop(this,'keynote6')">
<p style="line-height:15px;font-size:19px;font-family:'Neo_Sans_Bold';color:#ffffff;">Venkat</p>
            <p >Founder,Developer Inc.</p>  
            </div>
</div >

<div class="index-speaker-img">
<img id="image2" src="" onmouseout="hide(this,'keynote4')" onmouseover="show(this,'keynote4')" width="30%"   class="fl"/>

 <div id="keynote4" class="tip1" style="display:none;top:22%;left:33%;" onmouseout="hidePop(this,'keynote6')" onmouseover="showPop(this,'keynote6')">
            <p style="line-height:15px;font-size:19px;font-family:'Neo_Sans_Bold';color:#ffffff;"> Mann</p>
            <p >Editor-in Central</p>   
            </div>
      </div >

和

JS档案

var images = [
    "http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];

function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image1').src = images[x];
}

window.onload = randImg;

它改变了图像效果，但没有随着图像改变其主题演讲。提前致谢..........

额外............. http://jsfiddle.net/gFft7/20/

Answer 1

我会考虑使用明确定义的目标重新编写代码，但要使用图像加载随机主题演讲，您可以执行以下操作

HTML：

<img id="image" src="" width="30%" class="fl"/>
<div id="keynote"></div>

然后javascript：

var images = [
    { 
        "imagesrc": "http://static.ddmcdn.com/gif/lightning-gallery-18.jpg", 
        "keynotecontent": '<p style="line-height:15px;font-size:19px;font-family:\'Neo_Sans_Bold\';color:#000066;">Something</p><p>Test 1.</p>' 
    },
    { 
        "imagesrc": "http://static.ddmcdn.com/gif/lightning-gallery-19.jpg", 
        "keynotecontent": '<p style="line-height:15px;font-size:19px;font-family:\'Neo_Sans_Bold\';color:#666666;">Something else 1</p><p>Test 2.</p>'  
    },
    { 
        "imagesrc": "http://static.ddmcdn.com/gif/lightning-gallery-20.jpg", 
        "keynotecontent": '<p style="line-height:15px;font-size:19px;font-family:\'Neo_Sans_Bold\';color:#006600;">Something else 2</p><p>Test 3.</p>'  
    }
];

function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image').src = images[x].imagesrc;
    document.getElementById('keynote').innerHTML = images[x].keynotecontent;
}

window.onload = randImg;

这是一个js小提琴，下面的代码实现了http://jsfiddle.net/gFft7/25/

如何改变图像src和主题演讲..？

1 个答案: