jquery图片切换插件
/**
*图片切换插件
*Dependencejquery-1.7.2.min.js
**/
(function($){
//调用方式$('#silder').imgSilder({s_width:564,s_height:293,is_showTit:true,s_times:3000,css_link:'css/style.css'}); 容器必须加入idsilder_listorclasssilder_list
/*参考结构
<divclass="silder"id="silder">
<ulclass="silder_list"id="silder_list">
<li>
<imgsrc="css/img/1.jpg"border="0"alt="刘淇同志参观北京市志愿者之家">
</li>
<li>
<imgsrc="css/img/2.jpg"border="0"alt="刘淇同志与志愿者合影">
</li>
<li>
<imgsrc="css/img/3.jpg"border="0"alt="刘淇同志到北京大学人民医院调研">
</li>
<li>
<imgsrc="css/img/4.jpg"border="0"alt="2013中国志愿服务国际交流大会在京举行">
</li>
</ul>
</div>
*/
$.fn.silderDefaults={//默认参数
s_width:500,//容器宽度
s_height:500,//容器高度
is_showTit:true,//是否显示图片标题false:不显示，true:显示
s_times:3000,//设置滚动时间
css_link:'css/style.css'
};
$.extendSilder=function(obj,opt){//obj元素对象，opt参数对象
varg={ //公共方法，外部可调用
//初始化
init:function(){
varwh={width:opt.s_width,height:opt.s_height};
varpagesize=0;//页码
varsilderList=$('#silder_list',g.obj);
varsilderList_li=$('#silder_listli',g.obj);
g.LoadCSS(opt.css_link);//样式文件导入
g.obj.css(wh);silderList.css(wh);silderList_li.find('img').css(wh);//设置宽高属性
varcurrHtml="";//加入播放页码及文字描述
if(opt.is_showTit){//判断是否显示标题
currHtml+="<divclass='silder_desc'id='silder_desc'></div>";
}
img_size=silderList_li.size();//图片个数
currHtml+="<ulclass='silder_page'id='silder_page'>";//分页码代码注入
for(vari=0;i<img_size;i++){
currHtml+="<li>"+parseInt((1+i),10)+"</li>";
}
currHtml+="</ul>";
silderList_li.eq(0).show().siblings().hide();//初始化隐藏其他图片
g.obj.append(currHtml);//注入分页码
varsilderPage=$('#silder_page',g.obj);
varsilderPage_li=$('#silder_pageli',g.obj);
silderPage_li.eq(0).addClass('current');
if(opt.is_showTit){//初始化图片描述
$('#silder_desc').text(silderList_li.eq(0).find('img').attr('alt'));
}
silderPage_li.on('click',function(){
pagesize=$(this).index();
silderList_li.eq(pagesize).fadeIn(1000).siblings().fadeOut(100);
$(this).addClass('current').siblings().removeClass('current');
if(opt.is_showTit){
$('#silder_desc').text(silderList_li.eq(pagesize).find('img').attr('alt'));
}
});
vart;
silderList.hover(function(){window.clearInterval(t);return;},function(){t=window.setInterval(function(){
if(pagesize<img_size&&pagesize>=0)
{
silderList_li.eq(pagesize).fadeIn(1000).siblings().fadeOut(100);
silderPage_li.eq(pagesize).addClass('current').siblings().removeClass('current');
if(opt.is_showTit){
$('#silder_desc').text(silderList_li.eq(pagesize).find('img').attr('alt'));
}
pagesize++;
if(pagesize>=img_size){
pagesize=0;
}
}
},opt.s_times);}).trigger("mouseout");//悬浮时停止自动动画,trigger起默认触发作用
},
LoadCSS:function(url){//新建css
vars=document.createElement("LINK");
s.rel="stylesheet";
s.type="text/css";
s.href=url;
document.getElementsByTagName("HEAD")[0].appendChild(s);
}
};
g.obj=$(obj);
g.init();
returng;
}
$.fn.imgSilder=function(options){
if(this.length==0)return;//判断对象是否存在
this.each(function(){
if(this.usedSilder)return;
varopt=$.extend({},$.fn.silderDefaults,options);//合并已赋值参数
this.usedSilder=$.extendSilder(this,opt);
});
}
})(jQuery);
以上就是本文给大家分享的代码的全部内容了，希望大家能够喜欢