前言

之前INLOBP主题头部Banner切换(横幅切换)还不够平滑,正好有空所以稍稍修改,让Banner切换更自然一些,主要由JS来控制。这是为Ajax增色的,当然普通主题也能用,刷新一次页面就会换一张图。

准备图片

首先准备四张图片(三张以上,可供切换),放到主题目录的img/random文件夹。
图片按数字1.jpg、2.jpg、3.jpg ... 来命名。 这样做可以方便下面使用js的随机函数或者数学运算来进行图片切换控制。

JS控制

下面部分代码参照了【卢哥主题】中的平滑切换,我改成了非随机切换,例子里一共四张图片,所以JS里面判断>4则让 i_img=1 来控制循环切换。

var i_img = 1;
var firstLoad = 1;
var theme_dir = $("head #default-css").attr("href").split("style.css")[0];
function slider_img() {
    img_src = theme_dir + "img/random/" + i_img + ".jpg";
    i_img < 4 ? i_img++ :i_img = 1;
    $("#banner_sub").remove();
    $("#banner").before('<div id="banner_sub" style="z-index:-1;position:absolute;max-width:1214px;display:none"><img src="' + img_src + '" /></div>');
    $("#banner_sub img").load(function() {
        if (firstLoad == 1) {
            $("#banner_sub").fadeIn("slow");
            firstLoad = 0;
        } else {
            $("#banner_sub").css("display", "block");
        }
        $("#banner").fadeOut("slow", function() {
            $("#banner_sub").siblings("#banner").remove();
            $("#banner_sub").attr("id", "banner");
        });
    });
}
$(function() { // 初始化
    $("#h_banner").prepend('<div id="banner"></div>'); //插入banner
    slider_img();
});
注意问题

想要随机切换的话自己改i_img为随机数。
上面控制CSS中的position属性不能删掉,否则切换就没有平滑效果。另外,ajax加载需要重载slider_img()函数。That's all.