想把一个边栏上的幻灯片用javascript来创建,不想用HTML来实现,助于这样做可以减少几个文件请求,至少是不点击后。这个不错,又留作笔记了。
javascript 核心部分
<code>
/* Minty */
function insertSmiley(e) {
e = " " + e + " "
var t = document.getElementById("comment") if (t) if (document.selection) t.focus(),
rng = document.selection.createRange(),
rng.text = e,
t.focus()
else if (isNaN(t.selectionStart)) t.value += e,
t.focus()
else {
var n = t.selectionStart,
s = t.selectionEnd t.value = t.value.substring(0, n) + e + t.value.substring(s),
t.focus(),
t.selectionStart = t.selectionEnd = n + e.length
}
}
$(function() {
function e(e) {
var t = $("a", p) g = isNaN(e) ? v - 1 > g ? g + 1 : 0 : e,
t.clone().addClass("temp").appendTo(p).fadeOut(function() {
$(this).remove()
}),
t.attr("href", slideList[g].link).attr("title", slideList[g].title).html('<img decoding="async" src="' + slideList[g].image + '" alt="' + slideList[g].title + '">')
}
function t() {
j > 0 ? (z.val("发表成功(" + j--+")"), setTimeout(t, 1e3)) : (z.val("发表评论").prop("disabled", !1), j = 15)
}
function n(e) {
e && (D = e, o.stop().animate({
scrollTop: D.offset().top - 85
},
500))
}
var s = $("html"),
a = $(window),
i = $(document),
o = $("html, body"),
l = $("#s"),
r = $("#rocket"),
c = s.hasClass("lt-ie7"),
d = s.hasClass("lt-ie8") if ($("#m-btns .search").click(function() {
$("body").toggleClass("m-search"),
l.focus()
}), c && $(".menu-item-has-children").mouseenter(function() {
$(this).find(".sub-menu").show()
}).mouseleave(function() {
$(this).find(".sub-menu").hide()
}), d && l.focus(function() {
l.addClass("focus")
}).blur(function() {
l.removeClass("focus")
}), !(c || window.matchMedia && window.matchMedia("(max-width: 540px)").matches)) {
var u = $("#sidebar"),
m = u.height() + u.offset().top,
f = $("#newsletter") a.scroll(function() {
a.scrollTop() > Math.max(400, a.height()) ? r.addClass("show") : r.removeClass("show"),
a.scrollTop() > m ? f.addClass("sticky") : f.removeClass("sticky")
}).resize(function() {
f.css("left", u.offset().left)
}).resize()
}
if (r.click(function() {
return r.addClass("launch"),
o.animate({
scrollTop: 0
},
600,
function() {
r.removeClass("show launch")
}),
!1
}), "undefined" != typeof slideList && slideList.length) {
var h, p = $("#slides"),
v = slideList.length,
g = 0
if (p.html('<a href="' + slideList[0].link + '" title="' + slideList[0].title + '"><img decoding="async" loading="lazy" src="' + slideList[0].image + '" alt="' + slideList[0].title + '" width="220" height="110"></a>'), v > 2) {
var y = $("<span class='prev'>‹</span>"),
k = $("<span class='next'>›</span>") y.click(function() {
e(0 == g ? v - 1 : g - 1)
}),
k.click(function() {
e()
}),
p.append(y).append(k).hover(function() {
clearInterval(h)
},
function() {
h = setInterval(e, 7e3)
}),
h = setInterval(e, 7e3)
}
}
var w = $("#main"),
C = 0 w.on("click", ".loadmore",
function(e, t) {
if (C) return ! 1
var s = $(this).attr("title", "正在加载…").addClass("loading") C = 1
var a = s.attr("href") return $.get(a,
function(e) {
s.parent().remove() var i = $(e),
o = i.find(".hentry").addClass("fadein") w.append(o).append(i.find(".navigation")),
t && n(o.eq(0)) var l = i.filter("title").text() window.history && history.pushState && history.pushState(null, l, a),
document.title = l,
C = 0
}),
!1
}) var b = $("#comments") b.on("click", ".loadmore",
function() {
var e = $(this) return e.hasClass("loading") ? !1 : (e.attr("title", "正在加载…").addClass("loading"), $.get(e.attr("href"),
function(t) {
e.parent().remove(),
b.append($(t).find(".commentlist").addClass("fadein").find("img.lazy").lazyload({
effect: "fadeIn"
}).end()).append($(t).find(".navigation"))
}), !1)
}) var x = $("#commentform"),
T = $("#comment"),
I = $("#comments-title"),
L = $("#comment-settings"),
N = $(".comment-settings-toggle"),
S = $("span", N),
q = $("#author"),
z = $("#submit") N.click(function() {
L.hasClass("show") || (L.addClass("show"), $(this).removeClass("required"), q.focus(), setTimeout(function() {
i.on("click.comment",
function(e) {
L.find(e.target).length || e.target == L[0] || (L.removeClass("show"), i.off("click.comment"))
})
},
100))
}),
q.on("change input",
function() {
S.text($(this).val())
}),
T.keydown(function(e) {
if (e.ctrlKey && 13 == e.keyCode) x.trigger("submit")
else if (9 == e.keyCode) return N.click(),
!1
}),
$(".comments-link").click(T.focus),
$("#respond input").add(T).on("invalid",
function() {
$(this).one("input change",
function() {
$(this).parent().removeClass("invalid")
}).parent().addClass("invalid"),
$(this)[0] != T[0] && N.click()
}),
$(".commentlist").eq(0).children().length < 10 && $("#comments .loadmore").length && $("#comments .loadmore").trigger("click") var E, _, j = 15 x.submit(function() {
return $.ajax({
type: $(this).attr("method"),
url: MINTY.ajaxurl,
data: $(this).serialize() + "&action=minty_ajax_comment",
beforeSend: function() {
_ = $("#comment_parent").val(),
z.val("正在提交.").prop("disabled", !0),
T.prop("disabled", !0),
E = window.setInterval(function() {
"正在提交..." == z.val() ? z.val("正在提交.") : z.val(z.val() + ".")
},
700)
},
success: function(e) {
window.clearInterval(E),
/<\/li>/.test(e) ? ($(".commentlist").length > 0 ? ("0" == _ ? $("<div style='display:none'>" + e + "</div>").prependTo($(".commentlist").eq(0)).fadeIn() : $("<ol class='children' style='display:none'>" + e + "</ol>").insertAfter($("#comment-" + _)).fadeIn(), I.text(parseInt(I.text().match(/\d/g).join("")) + 1 + " 条评论")) : ($(".no-comments").replaceWith($("<ol class='commentlist' style='display:none'>" + e + "</ol>").fadeIn()), I.text("1 条评论")), T.prop("disabled", !1).val(""), t()) : (alert($("<div>" + e + "</div>").text()), z.prop("disabled", !1).val("发表评论"), T.prop("disabled", !1))
}
}),
!1
}) var D $(document).keypress(function(e) {
var t = e.target.tagName
if ("TEXTAREA" != t && "INPUT" != t) switch (e.which) {
case 106:
var s = $(".previous-post a")[0]
if (s) location.href = s.href
else {
if (C) return if (D) {
var a = D.next() a.hasClass("ga") && (a = a.next()),
a.hasClass("hentry") ? n(a) : $(".loadmore").length && ($(".loadmore").trigger("click", 1), o.animate({
scrollTop: i.height()
},
500))
} else n($(".hentry").eq(1))
}
e.preventDefault() break
case 107:
var l = $(".next-post a")[0]
if (l) location.href = l.href
else {
if (C) return if (D) {
var r = D.prev() r.hasClass("ga") && (r = r.prev()),
r.hasClass("hentry") && n(r)
} else n($(".hentry").eq(1))
}
e.preventDefault() break
case 114:
$("#comment").focus(),
e.preventDefault() break
case 47:
$("#s").focus(),
e.preventDefault()
}
}),
$(".widget-title span").each(function() {
var e = $(this) e.attr("title", e.text())
}),
location.hash.indexOf("#comment-") > -1 && window.setTimeout(function() {
i.scrollTop(i.scrollTop() - 74)
},
10),
$("[data-track]").click(function() {
var e = $(this).data("track").split("|") _hmt.push(["_trackEvent", e[0], e[1]])
}),
$("img.lazy").lazyload({
effect: "fadeIn"
})
}),
"ontouchstart" in window ? (document.documentElement.className += "touch", $(".menu-item-has-children").attr("aria-haspopup", !0).children("a").on(window.PointerEvent ? "pointerup": navigator.msPointerEnabled ? "MSPointerUp": "touchend", (function() {
return $(this).next().toggle(),
!1
}))) : (NProgress.configure({
showSpinner: !1
}), NProgress.start(), document.onreadystatechange = function() {
"complete" == document.readyState && setTimeout(NProgress.done, 500)
})
</code>
/* Minty */
function insertSmiley(e) {
e = " " + e + " "
var t = document.getElementById("comment") if (t) if (document.selection) t.focus(),
rng = document.selection.createRange(),
rng.text = e,
t.focus()
else if (isNaN(t.selectionStart)) t.value += e,
t.focus()
else {
var n = t.selectionStart,
s = t.selectionEnd t.value = t.value.substring(0, n) + e + t.value.substring(s),
t.focus(),
t.selectionStart = t.selectionEnd = n + e.length
}
}
$(function() {
function e(e) {
var t = $("a", p) g = isNaN(e) ? v - 1 > g ? g + 1 : 0 : e,
t.clone().addClass("temp").appendTo(p).fadeOut(function() {
$(this).remove()
}),
t.attr("href", slideList[g].link).attr("title", slideList[g].title).html('<img decoding="async" src="' + slideList[g].image + '" alt="' + slideList[g].title + '">')
}
function t() {
j > 0 ? (z.val("发表成功(" + j--+")"), setTimeout(t, 1e3)) : (z.val("发表评论").prop("disabled", !1), j = 15)
}
function n(e) {
e && (D = e, o.stop().animate({
scrollTop: D.offset().top - 85
},
500))
}
var s = $("html"),
a = $(window),
i = $(document),
o = $("html, body"),
l = $("#s"),
r = $("#rocket"),
c = s.hasClass("lt-ie7"),
d = s.hasClass("lt-ie8") if ($("#m-btns .search").click(function() {
$("body").toggleClass("m-search"),
l.focus()
}), c && $(".menu-item-has-children").mouseenter(function() {
$(this).find(".sub-menu").show()
}).mouseleave(function() {
$(this).find(".sub-menu").hide()
}), d && l.focus(function() {
l.addClass("focus")
}).blur(function() {
l.removeClass("focus")
}), !(c || window.matchMedia && window.matchMedia("(max-width: 540px)").matches)) {
var u = $("#sidebar"),
m = u.height() + u.offset().top,
f = $("#newsletter") a.scroll(function() {
a.scrollTop() > Math.max(400, a.height()) ? r.addClass("show") : r.removeClass("show"),
a.scrollTop() > m ? f.addClass("sticky") : f.removeClass("sticky")
}).resize(function() {
f.css("left", u.offset().left)
}).resize()
}
if (r.click(function() {
return r.addClass("launch"),
o.animate({
scrollTop: 0
},
600,
function() {
r.removeClass("show launch")
}),
!1
}), "undefined" != typeof slideList && slideList.length) {
var h, p = $("#slides"),
v = slideList.length,
g = 0
if (p.html('<a href="' + slideList[0].link + '" title="' + slideList[0].title + '"><img decoding="async" loading="lazy" src="' + slideList[0].image + '" alt="' + slideList[0].title + '" width="220" height="110"></a>'), v > 2) {
var y = $("<span class='prev'>‹</span>"),
k = $("<span class='next'>›</span>") y.click(function() {
e(0 == g ? v - 1 : g - 1)
}),
k.click(function() {
e()
}),
p.append(y).append(k).hover(function() {
clearInterval(h)
},
function() {
h = setInterval(e, 7e3)
}),
h = setInterval(e, 7e3)
}
}
var w = $("#main"),
C = 0 w.on("click", ".loadmore",
function(e, t) {
if (C) return ! 1
var s = $(this).attr("title", "正在加载…").addClass("loading") C = 1
var a = s.attr("href") return $.get(a,
function(e) {
s.parent().remove() var i = $(e),
o = i.find(".hentry").addClass("fadein") w.append(o).append(i.find(".navigation")),
t && n(o.eq(0)) var l = i.filter("title").text() window.history && history.pushState && history.pushState(null, l, a),
document.title = l,
C = 0
}),
!1
}) var b = $("#comments") b.on("click", ".loadmore",
function() {
var e = $(this) return e.hasClass("loading") ? !1 : (e.attr("title", "正在加载…").addClass("loading"), $.get(e.attr("href"),
function(t) {
e.parent().remove(),
b.append($(t).find(".commentlist").addClass("fadein").find("img.lazy").lazyload({
effect: "fadeIn"
}).end()).append($(t).find(".navigation"))
}), !1)
}) var x = $("#commentform"),
T = $("#comment"),
I = $("#comments-title"),
L = $("#comment-settings"),
N = $(".comment-settings-toggle"),
S = $("span", N),
q = $("#author"),
z = $("#submit") N.click(function() {
L.hasClass("show") || (L.addClass("show"), $(this).removeClass("required"), q.focus(), setTimeout(function() {
i.on("click.comment",
function(e) {
L.find(e.target).length || e.target == L[0] || (L.removeClass("show"), i.off("click.comment"))
})
},
100))
}),
q.on("change input",
function() {
S.text($(this).val())
}),
T.keydown(function(e) {
if (e.ctrlKey && 13 == e.keyCode) x.trigger("submit")
else if (9 == e.keyCode) return N.click(),
!1
}),
$(".comments-link").click(T.focus),
$("#respond input").add(T).on("invalid",
function() {
$(this).one("input change",
function() {
$(this).parent().removeClass("invalid")
}).parent().addClass("invalid"),
$(this)[0] != T[0] && N.click()
}),
$(".commentlist").eq(0).children().length < 10 && $("#comments .loadmore").length && $("#comments .loadmore").trigger("click") var E, _, j = 15 x.submit(function() {
return $.ajax({
type: $(this).attr("method"),
url: MINTY.ajaxurl,
data: $(this).serialize() + "&action=minty_ajax_comment",
beforeSend: function() {
_ = $("#comment_parent").val(),
z.val("正在提交.").prop("disabled", !0),
T.prop("disabled", !0),
E = window.setInterval(function() {
"正在提交..." == z.val() ? z.val("正在提交.") : z.val(z.val() + ".")
},
700)
},
success: function(e) {
window.clearInterval(E),
/<\/li>/.test(e) ? ($(".commentlist").length > 0 ? ("0" == _ ? $("<div style='display:none'>" + e + "</div>").prependTo($(".commentlist").eq(0)).fadeIn() : $("<ol class='children' style='display:none'>" + e + "</ol>").insertAfter($("#comment-" + _)).fadeIn(), I.text(parseInt(I.text().match(/\d/g).join("")) + 1 + " 条评论")) : ($(".no-comments").replaceWith($("<ol class='commentlist' style='display:none'>" + e + "</ol>").fadeIn()), I.text("1 条评论")), T.prop("disabled", !1).val(""), t()) : (alert($("<div>" + e + "</div>").text()), z.prop("disabled", !1).val("发表评论"), T.prop("disabled", !1))
}
}),
!1
}) var D $(document).keypress(function(e) {
var t = e.target.tagName
if ("TEXTAREA" != t && "INPUT" != t) switch (e.which) {
case 106:
var s = $(".previous-post a")[0]
if (s) location.href = s.href
else {
if (C) return if (D) {
var a = D.next() a.hasClass("ga") && (a = a.next()),
a.hasClass("hentry") ? n(a) : $(".loadmore").length && ($(".loadmore").trigger("click", 1), o.animate({
scrollTop: i.height()
},
500))
} else n($(".hentry").eq(1))
}
e.preventDefault() break
case 107:
var l = $(".next-post a")[0]
if (l) location.href = l.href
else {
if (C) return if (D) {
var r = D.prev() r.hasClass("ga") && (r = r.prev()),
r.hasClass("hentry") && n(r)
} else n($(".hentry").eq(1))
}
e.preventDefault() break
case 114:
$("#comment").focus(),
e.preventDefault() break
case 47:
$("#s").focus(),
e.preventDefault()
}
}),
$(".widget-title span").each(function() {
var e = $(this) e.attr("title", e.text())
}),
location.hash.indexOf("#comment-") > -1 && window.setTimeout(function() {
i.scrollTop(i.scrollTop() - 74)
},
10),
$("[data-track]").click(function() {
var e = $(this).data("track").split("|") _hmt.push(["_trackEvent", e[0], e[1]])
}),
$("img.lazy").lazyload({
effect: "fadeIn"
})
}),
"ontouchstart" in window ? (document.documentElement.className += "touch", $(".menu-item-has-children").attr("aria-haspopup", !0).children("a").on(window.PointerEvent ? "pointerup": navigator.msPointerEnabled ? "MSPointerUp": "touchend", (function() {
return $(this).next().toggle(),
!1
}))) : (NProgress.configure({
showSpinner: !1
}), NProgress.start(), document.onreadystatechange = function() {
"complete" == document.readyState && setTimeout(NProgress.done, 500)
})
</code>
代码太复杂了,抽空慢慢提取,至于那个 e 是什么玩意,我还真没看出来,干扰的元素太多了~~~
下面的代码就是 要在什么地方显示的,也就是包含内容的 javascript 和html 混合的 代码了,悲剧啊~~好辛苦….
<code>
<aside id="text-283011632" class="widget widget_text clearfix">
<h3 class="widget-title"><span>原创推荐</span></h3>
<div class="textwidget">
<div id="slides">
<script>
var slideList = [{
image: "http://bcs.duapp.com/picstore/NlmAeTXopl.png",
title: "前往了解 WordPress 主题 ZiPE",
link: "http://c7sky.com/wordpress-theme-zipe.html"
}, {
image: "http://bcs.duapp.com/picstore/tELSJWjcwC.jpg",
title: "立即获取 Chrome Speed Dial 2 中文版",
link: "http://c7sky.com/chrome-speeddial2-cn.html"
}, {
image: "http://bcs.duapp.com/picstore/Ec2c2N1gYP.jpg",
title: "立即获取 SEO 必备 Chrome 扩展 Flager",
link: "http://c7sky.com/flager.html"
}, {
image: "http://bcs.duapp.com/picstore/J5ayPhtN0m.jpg",
title: "立即获取 Chrome 代码高亮扩展",
link: "http://c7sky.com/javascript-and-css-code-beautifier.html"
}];
</script>
</div>
</div>
</aside>
</code>
<aside id="text-283011632" class="widget widget_text clearfix">
<h3 class="widget-title"><span>原创推荐</span></h3>
<div class="textwidget">
<div id="slides">
<script>
var slideList = [{
image: "http://bcs.duapp.com/picstore/NlmAeTXopl.png",
title: "前往了解 WordPress 主题 ZiPE",
link: "http://c7sky.com/wordpress-theme-zipe.html"
}, {
image: "http://bcs.duapp.com/picstore/tELSJWjcwC.jpg",
title: "立即获取 Chrome Speed Dial 2 中文版",
link: "http://c7sky.com/chrome-speeddial2-cn.html"
}, {
image: "http://bcs.duapp.com/picstore/Ec2c2N1gYP.jpg",
title: "立即获取 SEO 必备 Chrome 扩展 Flager",
link: "http://c7sky.com/flager.html"
}, {
image: "http://bcs.duapp.com/picstore/J5ayPhtN0m.jpg",
title: "立即获取 Chrome 代码高亮扩展",
link: "http://c7sky.com/javascript-and-css-code-beautifier.html"
}];
</script>
</div>
</div>
</aside>
</code>
其实这个代码是来自 http://c7sky.com/brand-new-blog-for-2013.html 呵呵.
抽空再来提取吧。其实这个挺好的,内容放在主题的后台配置中,嗯,不错~~