1. 技术文章
  2. Make Recent Posts Label Box using Li childs - JavaScript

Make Recent Posts Label Box using Li childs - JavaScript

由 左心房为你撑大大i 提交于 2019-12-11 09:14:06

问题


I need help to make RecentPosts Box show the last post for the tag that I defined for the 5 li:nth-childs. This is for my blog about tech news. Thah one is on site appears the recent posts but I would like to have the latest posts but by tag.TRITEK

Hope that you guys can help me please. Thanks a lot.

function FeaturedPost(a) {
    (function(e) {
        var h = {
            blogURL: "",
            MaxPost: 5,
            idcontaint: "#featuredpost",
            ImageSize: 500,
            interval: 10000,
            autoplay: false,
            loadingClass: "loadingxx",
            pBlank: "https://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",
            MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            tagName: false
        };
        h = e.extend({}, h, a);
        var g = e(h.idcontaint);
        var c = h.blogURL;
        var d = h.MaxPost * 200;
        if (h.blogURL === "") {
            c = window.location.protocol + "//" + window.location.host
        }
        g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);
        var f = function(w) {
            var q, k, m, u, x, p, t, v, r, l = "",
                s = w.feed.entry;
            for (var o = 0; o < s.length; o++) {
                for (var n = 0; n < s[o].link.length; n++) {
                    if (s[o].link[n].rel == "alternate") {
                        q = s[o].link[n].href;
                        break
                    }
                }
                if ("media$thumbnail" in s[o]) {
                    u = s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize + "-c")
                } else {
                    u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1")
                }
                k = s[o].title.$t;
                l += '<li><a href="' + q + '" title="' + k + '"><div class="overlayx"></div><img class="random" src="' + u + '" title="' + k + '"><h4>' + k + '</h4>' + t + '</span> ' + m + "</span></div></li>"
            }
            e("ul", g).append(l)
        };
        var b = function() {
            var i = "/-/" + h.tagName;
            if (h.tagName === false) {
                i = "";
                e.ajax({
                    url: c + "/feeds/posts/default" + i + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script",
                    success: f,
                    dataType: "jsonp",
                    cache: true
                })
            } else {
                e.ajax({
                    url: c + "/feeds/posts/default" + i + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script",
                    success: f,
                    dataType: "jsonp",
                    cache: true
                })
            }(function() {
                setTimeout(function() {
                    e("#prevx").click(function() {
                        e("#slides li:first").before(e("#slides li:last"));
                        return false
                    });
                    e("#nextx").click(function() {
                        e("#slides li:last").after(e("#slides li:first"));
                        return false
                    });
                    if (h.autoplay) {
                        var k = h.interval;
                        var l = setInterval("rotate()", k);
                        e("#slides li:first").before(e("#slides li:last"));
                        e("#slides").hover(function() {
                            clearInterval(l)
                        }, function() {
                            l = setInterval("rotate()", k)
                        });

                        function j() {
                            e("#nextx").click()
                        }
                    }
                    g.removeClass(h.loadingClass)
                }, d)
            })()
        };
        e(document).ready(b)
    })(jQuery)
};

function rotate() {
    $('#nextx').click();
};
document.write('')

//<![CDATA[
$(document).ready(function() {
    FeaturedPost({
        blogURL: "https://trit3k.blogspot.com",
        MaxPost: 5,
        idcontaint: "#featuredpost",
        ImageSize: 500,
        tagName: false
    });
});
//]]>
#featuredpost {
     width: 1170px;
     overflow: hidden;
     display: block;
     position: relative;
  margin:15px auto;
}
 #slides *{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
 #slides ul,#slides li{
    padding:0;
    margin:0;
    list-style:none;
    position:relative
}
 #slides ul{
    height:320px
}
 #slides li{
    width:50%;
    height:100%;
    position:absolute;
    display:none
}
 #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){
    display:block
}
 #slides li:nth-child(1){
    left:0;
    top:0
}
 #slides li:nth-child(2){
    left:50%;
    width:25%;
    height:50%
}
 #slides li:nth-child(3){
    left:75%;
    width:25%;
    height:50%
}
 #slides li:nth-child(4){
    left:50%;
    top:50%;
    width:25%;
    height:50%
}
 #slides li:nth-child(5){
    left:75%;
    top:50%;
    width:25%;
    height:50%
}
 #slides li:nth-child(1) h4 {
    overflow:hidden;
    font-size:20px;
    bottom:18px;
    color:#fff;
    width:auto;
    text-align:center;
    text-transform:uppercase;
    height:auto;
    font-family:Arial;
    line-height:32px;
    left:10;
   margin:0px;
   margin-right:10px;
}
 #slides li:nth-child(1) .label_text {
    font-size:30px;
    display:block;
    bottom:10px;
    left:10px;
     padding:0;
    font-family:Arial;
}
 #slides a{
      background-color:rgba(40,40,40,1);
    display:block;
    width:100%;
    height:100%;
    overflow:hidden
}
 #slides img{
    display:block;
    width:100%;
    height:auto;
    border:0;
    padding:0;
    background-color:#333;
    -moz-transform:scale(1.0) rotate(0);
    -webkit-transform:scale(1.0) rotate(0);
    -ms-transform:scale(1.0) rotate(0);
    transform:scale(1.0) rotate(0);
    transition:all 0.6s linear;
}
 #slides li a:hover img {
   opacity:0.8;
transition:all 0s ease;
-webkit-transition:all 0s ease;
-moz-transition:all 0s ease;
-o-transition:all 0s ease
}
 #slides .overlayx{
   position:absolute;
left:0;
top:0;
z-index:2;
width:100%;
height:100%;
}
 #slides h4{
    position:absolute;
    height: auto;
    bottom:0px;
    font-size:14px;
    font-family:Arial;
    left:10px;
    padding:5px 10px;
    color:#fff;
    z-index:3;
    line-height:20px;
    font-weight:normal;
     background:rgba(60,60,60,0.8);
    text-transform:uppercase;
    margin-right:10px;
   text-align: center;
   border-bottom-color: rgb(8, 176, 255);
border-bottom-style: solid;
border-bottom-width: 3px;
}
 #slides li:nth-child(1) .overlayx{
    display:none;
}
 #slides li:hover .overlayx{
    opacity:0.1;
}
 #slides li:nth-child(2) .overlayx{
    display:none;
}
#slides li:nth-child(3) .overlayx{
    display:none;
}
#slides li:nth-child(4) .overlayx{
    display:none;
}
#slides li:nth-child(5) .overlayx{
    display:none;
}
<div id="featuredpost"></div>

回答1:


Add your tags list tagName: ["Android","Inovação","Gaming", "Oreo","SnapChat"] to the following modified code

function FeaturedPost(a) {
    (function(e) {
        var h = {
            blogURL: "",
            MaxPost: 5,
            idcontaint: "#featuredpost",
            ImageSize: 500,
            interval: 10000,
            autoplay: false,
            loadingClass: "loadingxx",
            pBlank: "https://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",
            MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            tagName: false
        };
        h = e.extend({}, h, a);
        var g = e(h.idcontaint);
        var c = h.blogURL;
        var d = h.MaxPost * 200;
        if (h.blogURL === "") {
            c = window.location.protocol + "//" + window.location.host
        }
        g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);
        var l = "";
        var count = 0;
        var f = function(w) {
            var q, k, m, u, x, p, t, v, r, tt, ts = "",
                s = w.feed.entry;
            for (var o = 0; o < s.length; o++) {
                for (var n = 0; n < s[o].link.length; n++) {
                    if (s[o].link[n].rel == "alternate") {
                        q = s[o].link[n].href;
                        break
                    }
                }
                if ("media$thumbnail" in s[o]) {
                    u = s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize + "-c")
                } else {
                    u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1")
                }
                k = s[o].title.$t;
                ts = s[o].published.$t;
                tt = Date.parse(ts);
                l += '<li data-date="' + tt + '"><a href="' + q + '" title="' + k + '"><div class="overlayx"></div><img class="random" src="' + u + '" title="' + k + '"><h4>' + k + '</h4>' + t + '</span> ' + m + "</span></div></li>"
            }
            count++;
            if (count === h.tagName.length) {
                var el = e( '<div></div>' ).html(l);
                e('li', el).sort(function (a, b) {
                   return e(b).attr('data-date') - e(a).attr('data-date');
                }).appendTo("ul", g);
            }
        };
        var b = function() {
            if (h.tagName === false) {
                i = "";
                e.ajax({
                    url: c + "/feeds/posts/default" + i + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script",
                    success: f,
                    dataType: "jsonp",
                    cache: true
                })
            } else {
                for (var q = 0; q < h.tagName.length; q++) {
                    e.ajax({
                        url: c + "/feeds/posts/default/-/" + h.tagName[q] + "?max-results=1&orderby=published&alt=json-in-script",
                        success: f,
                        dataType: "jsonp",
                        cache: true
                    })
                }
            }(function() {
                setTimeout(function() {
                    e("#prevx").click(function() {
                        e("#slides li:first").before(e("#slides li:last"));
                        return false
                    });
                    e("#nextx").click(function() {
                        e("#slides li:last").after(e("#slides li:first"));
                        return false
                    });
                    if (h.autoplay) {
                        var k = h.interval;
                        var l = setInterval("rotate()", k);
                        e("#slides li:first").before(e("#slides li:last"));
                        e("#slides").hover(function() {
                            clearInterval(l)
                        }, function() {
                            l = setInterval("rotate()", k)
                        });

                        function j() {
                            e("#nextx").click()
                        }
                    }
                    g.removeClass(h.loadingClass)
                }, d)
            })()
        };
        e(document).ready(b)
    })(jQuery)
};

function rotate() {
    $('#nextx').click();
};
document.write('')

//<![CDATA[
$(document).ready(function() {
    FeaturedPost({
        blogURL: "https://trit3k.blogspot.com",
        MaxPost: 5,
        idcontaint: "#featuredpost",
        ImageSize: 500,
        tagName: ["Android","Inovação","Gaming", "Oreo","SnapChat"]
    });
});
//]]>


来源：https://stackoverflow.com/questions/50568350/make-recent-posts-label-box-using-li-childs-javascript

标签
javascript
html
css
blogger
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!