1

所以，我有一个网站，它有一个随机加载幻灯片，其中 div 容器为每张幻灯片调用文本。我希望能够为特定单词添加链接和/或颜色更改。这是我到目前为止所拥有的 JSFIDDLE 链接：http: //jsfiddle.net/shadna/Agq7W/

为方便起见，这里是编码：

JS::

jQuery(function($){
    $('#homebanner').css({backgroundColor: "#000"}); 
    var totalCount = 4; 
    var num = Math.ceil( Math.random() * totalCount );
    var hText = ["WE SPEAK ARCHITECTURE", "WE HAVE HIGH SPIRIT(S)",  "STRATEGY: BUILT ON HUMAN-CENTERED", "FOREVER IN BLUE JEANS"];
    var hsubText = ["CLIENT: EDA ARCHITECTS", "CLIENT: HIGH WEST DISTILLERY", "CLIENT: ARCHITECTURAL NEXUS",  "CLIENT: VAULT DENIM"];

    function setBGImage() { 
        var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
        $('#homebanner').css({
            backgroundImage:"url("+bgimage+")",
        }); 
        $('#htxt').html(hText[num - 1]);
        $('#hsubtxt').html(hsubText[num - 1]);
    } 
    setBGImage(); 
});

HTML::

<div id="homebanner">
    <div id="hwrap">
        <div id="htxt"></div>
    <div id="hsubtxt"></div>
    </div>
</div>

任何信息都会对这个卑微的 JS 学习者有所帮助。

4

3 回答 3

1

我是否理解正确：您想用您的一个项目随机填充一个容器？

我建议您采用更简单的方法：

在 HTML 中构建所有没有 javascript 的容器。然后简单地使用你的随机数作为索引，使只有一个容器可见，也是随机的，但由于 JavaScript 魔法少得多，所以更容易。没有必要这样做！

如果您为所有调用的横幅提供一个类，.banner那么您可以像这样在 js 中定位它们：

$('.banner').eq(yourRandomNumber).css('display', 'block');

和所有其他横幅应该有display: none。

我在您的小提琴中注意到的另一件事：您有许多不同元素的 ID，它们基本上具有相同的样式。而是使用一个类并定义一次属性。然后你为这个类提供每个元素。例子：

.banner {
    display:block;
    width:100%; 
    height:290px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden;
    z-index:700;

}

只有不同的样式需要在一个单独的类中（我建议您使用尽可能少的 ID）：

.faithologybanner {
    background: url(/TESTING/images/elements/banner_faithology001.jpg) no-repeat center top ; 
}
于 2013-07-18T20:50:22.660 回答
1

首先，一些简化和修改的代码：

jQuery(function ($) {
    $('#homebanner').css({
        backgroundColor: "#000"
    });

    // put all the information in the same place, in this case an
    // array of objects:
    var details = [{
        head: 'WE SPEAK ARCHITECTURE',
        sub: 'EDA ARCHITECTS',
        link: 'http://example.com/edaarchitects.html'
    }, {
        head: 'WE HAVE HIGH SPIRIT(S)',
        sub: 'HIGH WEST DISTILLARY',
        link: 'http://example.com/highwestdistillary.html'
    }, {
        head: 'STRATEGY: BUILT ON HUMAN-CENTERED',
        sub: 'ARCHITECTURAL NEXUS',
        link: 'http://example.com/architecturalnexus.html'
    }, {
        head: 'FOREVER IN BLUE JEANS',
        sub: 'VAULT DENIM',
        link: 'http://example.com/vault-denim.html'
    }],
        // use the length of the details array to work out the upper bounds
        // of the random number in order to allow for easier updating:
        num = Math.floor(Math.random() * details.length),

        // cache the relevant object for later use:
        item = details[num];

    function setBGImage() {
        // using '(num + 1)' because your images aren't zero-indexed (for some reason):
        var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/' + (num + 1) + '.jpg';
        $('#homebanner').css({
            backgroundImage: "url(" + bgimage + ")",
        });
        $('#htxt').html(item.head);

        // I've taken 'CLIENT: ' out of the 'sub' since it was in all of them.
        // creating an 'a' element using the 'link' information from the object:
        $('#hsubtxt').html('CLIENT: ' + '<a href="' + item.link + '">' + item.sub + '</a>');
    }
    setBGImage();
});

JS 小提琴演示。

于 2013-07-18T20:59:10.943 回答
0

我认为这就是您想要的（仅在此处发布更改）

var hsubText = [
    { client : "EDA ARCHITECTS", url : 'http://example.com' },
    { client : "HIGH WEST DISTILLERY",  url : 'http://example.com'},
    { client : "ARCHITECTURAL NEXUS",  url : 'http://example.com' },
    { client : "VAULT DENIM",  url : 'http://example.com' }
];
function setBGImage()
{ 
    var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
    $('#homebanner').css({ 'backgroundImage':'url('+bgimage+')' }); 
    $('#htxt').html(hText[num - 1]);
    var client = hsubText[num - 1].client;
    var url = hsubText[num - 1].url;
    $('#hsubtxt').html('CLIENT : <a href="'+url+'">'+client+'</a>');
 }

CSS：

#hwrap a { color:red }

演示。

更新：（因为OP在评论中要求它）

function setBGImage()
{ 
    var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
    $('#homebanner').css({ 'backgroundImage':'url('+bgimage+')' }); 
    var words = hText[num - 1].split(' ');
    var wordsFirst = words.shift();
    $('#htxt').html($('<span/>', { text:wordsFirst, style:'color:yellow'})).append(' '+ words.join(' '));
    var client = hsubText[num - 1].client;
    var url = hsubText[num - 1].url;
    $('#hsubtxt').html('CLIENT : <a href="'+url+'">'+client+'</a>');
}

演示。

于 2013-07-18T21:21:50.697 回答