您现在的位置是:首页 > cms教程 > phpcms教程phpcms教程

phpcms v9中jquery.sgallery插件升级到soChange的方法

凡旋2025-05-27 18:29:02phpcms教程已有5人查阅

导读今日发现在系统中焦点图位置用的是jquery.sgallery.js插件,但是在搜狗浏览器的兼容模式中,焦点图会逐个被裁剪,也找不到具体原因,就搜索了下sgallery,发现他有了一个升级版本

今日发现在系统中焦点图位置用的是jquery.sgallery.js插件,但是在搜狗浏览器的兼容模式中,焦点图会逐个被裁剪,也找不到具体原因,就搜索了下sgallery,发现他有了一个升级版本,叫做soChange。
作者说解决了一些bug于是把他换到系统当中,phpcms系统将这个插件增加了一个titleObj属性,我们也更新到他的新版本中。
这样更改完之后的js文件是这样的
/*
* soChange 1.6.1 - object change with jQuery
* made by bujichong 2024-10-10
* http://hi.baidu.com/bujichong/
*/
;(function($){
$.fn.extend({
"soChange": function(o){
o= $.extend({
thumbObj:null,//导航对象
titleObj:null,//标题
botPrev:null,//按钮上一个
botNext:null,//按钮下一个
changeType:'fade',//切换方式,可选:fade,slide,默认为fade
thumbNowClass:'now',//导航对象当前的class,默认为now
thumbOverEvent:true,//鼠标经过thumbObj时是否切换对象,默认为true,为false时,只有鼠标点击thumbObj才切换对象
slideTime:1000,//平滑过渡时间,默认为1000ms,为0或负值时,忽略changeType方式,切换效果为直接显示隐藏
autoChange:true,//是否自动切换,默认为true
clickFalse:true,//导航对象点击是否链接无效,默认是return false链接无效,当thumbOverEvent为false时,此项必须为true,否则鼠标点击事件冲突
overStop:true,//鼠标经过切换对象时,是否停止切换,并于鼠标离开后重启自动切换,前提是已开启自动切换
changeTime:5000,//自动切换时间
delayTime:300//鼠标经过时对象切换迟滞时间,推荐值为300ms
}, o || {});
var _self = $(this);
var thumbObj;
var size = _self.size();
var nowIndex =0; //定义全局指针
var index;//定义全局指针
var startRun;//预定义自动运行参数
var delayRun;//预定义延迟运行参数
//主切换函数
function fadeAB () {
if (nowIndex != index) {
if (o.thumbObj) {
$(o.thumbObj).removeClass(o.thumbNowClass).eq(index).addClass(o.thumbNowClass);
$(o.titleObj).eq(nowIndex).hide();//新增加title
$(o.titleObj).eq(index).show();//新增加title
}
if (o.slideTime <= 0) {
_self.eq(nowIndex).hide();
_self.eq(index).show();
}else if(o.changeType=='fade'){
_self.eq(nowIndex).fadeOut(o.slideTime);
_self.eq(index).fadeIn(o.slideTime);
}else{
_self.eq(nowIndex).slideUp(o.slideTime);
_self.eq(index).slideDown(o.slideTime);
}
nowIndex = index;
// if (o.autoChange) {
// clearInterval(startRun);//重置自动切换函数
// startRun = setInterval(runNext,o.changeTime);
// }
}
}
//切换到下一个
function runNext() {
index = (nowIndex+1)%size;
fadeAB();
}
//初始化
_self.hide().eq(0).show();
//点击任一图片
if (o.thumbObj) {
thumbObj = $(o.thumbObj);
//初始化thumbObj
thumbObj.removeClass(o.thumbNowClass).eq(0).addClass(o.thumbNowClass);
thumbObj.click(function () {
index = thumbObj.index($(this));
fadeAB();
if (o.clickFalse) {return false;}
});
if (o.thumbOverEvent) {
thumbObj.hover(function () {//去除jquery1.2.6不支持的mouseenter方法
index = thumbObj.index($(this));
delayRun = setTimeout(fadeAB,o.delayTime);
},function () {
clearTimeout(delayRun);
});
}
}
//点击上一个
if (o.botNext) {
$(o.botNext).click(function () {
if(_self.queue().length<1){runNext();}
return false;
});
}
//点击下一个
if (o.botPrev) {
$(o.botPrev).click(function () {
if(_self.queue().length<1){
index = (nowIndex+size-1)%size;
fadeAB();
}
return false;
});
}
//自动运行
if (o.autoChange) {
startRun = setInterval(runNext,o.changeTime);
if (o.overStop) {
_self.hover(function () {//去除jquery1.2.6不支持的mouseenter方法
clearInterval(startRun);//重置自动切换函数
},function () {
startRun = setInterval(runNext,o.changeTime);
});
}
}
}
})
})(jQuery);
function slide(Name,Class,Width,Height,fun){
$(Name).width(Width);
$(Name).height(Height);
if(fun == true){
$(Name).append('<div class="title-bg"></div><div class="title"></div><div class="change"></div>')
var atr = $(Name+' div.changeDiv a');
var sum = atr.length;
for(i=1;i<=sum;i++){
var title = atr.eq(i-1).attr("title");
var href = atr.eq(i-1).attr("href");
$(Name+' .change').append('<i>'+i+'</i>');
$(Name+' .title').append('<a href="'+href+'">'+title+'</a>');
}
$(Name+' .change i').eq(0).addClass('cur');
}
$(Name+' div.changeDiv a').soChange({//对象指向层,层内包含图片及标题
titleObj:Name+' div.title a',
thumbObj:Name+' .change i',
thumbNowClass:Class
});
$(Name+" .title-bg").width(Width);
}
这样的话,外部调用的地方也就不用改了,还是原来的老样子参考
new slide("#main-slide","cur",310,260,1);//焦点图
原来jquery.sgallery.js中还有几个函数,可以直接copy到新文件当中用了。

本文标签:

很赞哦! (1)

暂无内容
暂无内容

相关文章

暂无内容
暂无内容
留言与评论 (共有 0 条评论)
昵称:
匿名发表 登录账号
         
验证码: