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

今日发现在系统中焦点图位置用的是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到新文件当中用了。

疯狂暗示打赏按钮

本文标签：

声明：本文由代码号注册/游客用户【凡旋】供稿发布，本站不对用户发布的phpcms v9中jquery.sgallery插件升级到soChange的方法信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：凡旋» https://www.ebingou.cn/dmh/15675.html

很赞哦！ ()