前言
之前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