前言
之前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.
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4473.html
