怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 304 JQUERY DREAMWEAVER
jquery幻灯片插件开发图文教程
来源：互联网
2023-03-17 00:52:10 435
对于前端开发人员来说，jquery是必需掌据的一门语言技术，而jquery插件开发又是jquery中的学习难点，虽然网络中jquery插件已经相当丰富，但是，面对调试中出现的各种问题，和插件的二次扩展，显得尤为的不方便。这是自已开发插件满中项目的需求，就显得非常必要的事。
工具/原料
- jquery.js
方法/步骤
定义html格式
div id="zSlider">
ul class="Zslider-img">
li>a href="#">img src="img/1.png" title="杀人短片" src="杀人短片"/>/a>/li>
li>a href="#">img src="img/2.png" title="剪刀手爱德华" src="剪刀手爱德华"/>/a>/li>
li>a href="#">img src="img/3.png" title="独行杀手" src="独行杀手"/>/a>/li>
li>a href="#">img src="img/4.png" title="龙争虎斗" src="龙争虎斗"/>/a>/li>
/ul>
/div>
jquery插件的标准格式-自调用匿名函数
;(function($,window,document,undefined){
})(jQuery,window,document);
使用面向对象的开发插件
;(function($,window,document,undefined){
var zSlider = function(element,options){
}
zSlider.prototype = {
init:function(){
}
}
$.fn.zSlider = function(options){
var obj = new zSlider(this,options);
obj.init();
return this;//返回jQuery选择器的集合，以便链式调用
}
})(jQuery,window,document);
定义插件参数
this.$element = element;
this.options = $.extend(true,{
animate: 'roll',
direction : 'horizontal',//滚动方向,vertical重直滚动,horizontal水平滚动
event:"mouseover",
duration: 3000,//播放频率
speed : 500,//滚动速度
auto : true//是否自动播放
},options);
初始化数据
init:function(){
this.index = 0;//开始的索引
//图片宽度
this.width = $('.' this.options.pic_class,this.$element).find('img:first').width();
//图片高度
this.height = $('.' this.options.pic_class,this.$element).find('img:first').height();
//图片大包装盒
this.img_wrop = this.$element.find('.' this.options.pic_class);
//所有小包装盒
this.img_box = this.img_wrop.children();
//所有图片
this.imgs = this.$element.find('.' this.options.pic_class ' img');
//图片数量
this.number = this.imgs.length;
//设置slider的为绝对定位
this.$element.css({'position':'relative'});
//设置包装盒为相对定位
this.img_wrop.css({'position':'absolute',top:'0px',left:'0px'});
//如果为水平滚动，设置大包装盒的宽度，图片小包装盒为左浮动
if(this.options.direction == 'horizontal' && this.options.animate == 'roll'){
this.img_wrop.css({'width':this.width*this.number 'px'});
this.img_box.css({'float':'left'});
}
//生成导航
this.createNav();
//是否自动播放
if(this.options) this.play();
//绑定事件，切换图片
this.bind(this.options.event);
},
编写生成导航方法
向zSlider的原型中添加生成导航的createNav方法
createNav:function(){
this.$element.append('div class="nav">/div>');
this.$nav = this.$element.find('.nav');
for(var i =1;i=this.number;i ){
this.$nav.append('span>●/span>')
}
this.$nav.css({'position':'absolute',
'z-index':3,'left':'50%',
'bottom':'20px',
'text-align':'center',
'font-size':'0',
'border-radius':'10px',
'background-color':' rgba(255,255,255,0.3)',
'filter': 'alpha(opacity:30)'});
this.$nav.find('span').css({'display':'inline-block',
'font-size':'14px','color':'#fff',
'text-decoration':'none',
'cursor':'pointer',
'margin':'2px'});
this.$nav.find('span:first').addClass('on');
this.$nav.find('.on').css({'color':'orange'});
var nav_margin_left = this.$nav.width()*(-0.5);
//获取导航margin-left的偏移量，必需先设置好span的大小之后在获取,否则获取的将是父素的宽度
this.$nav.css({'margin-left':nav_margin_left 'px'});
}
自动播放方法
play : function(){
var Z = this;//setInterval中的this是指向window对象，所以也要储存起来，以便在setInterval中使用
if(this.element.timer)clearInterval(this.element.timer);
this.element.timer = setInterval(function(){
Z.index
if(Z.index >= Z.number){//如果索引大于或者等于图片总数
Z.index =0;
}
Z.$nav.removeClass('on').css({'color':'#fff'});
Z.$nav.eq(Z.index).addClass('on').css({'color':'orange'});
Z[Z.options.animate]();//图片动画
},this.options.duration);
},
图片滚动动画
roll:function(){
var Z= this;
if(Z.options.direction == 'vertical'){//如果是垂直滚动
$(Z.img_wrop).animate({
top: -Z.height*Z.index 'px'
},Z.options.speed);
}else{
$(Z.img_wrop).animate({
left: -Z.width*Z.index 'px'
},Z.options.speed);
}
},
绑定图片切换事件
bind:function(type){
var Z = this;
this.$nav.bind(type,function(){
Z.index = Z.$nav.index(this);//当前this指向的导航元素对象,例如span对象
Z.$nav.removeClass('on').css({'color':'#fff'});
Z.$nav.eq(Z.index).addClass('on').css({'color':'orange'});
//停止当前所有动面，如果没有这一句，在快速切换导航时，图片将一直切换,直到所有动画执行完并，造成效果不佳。
$(Z.img_wrop).stop();
Z[Z.options.animate]();//图片动画
clearInterval(Z.$element.timer);
});
this.$nav.bind('mouseout',function(){
if(Z.options){
Z.play();
}
})
},
到此，幻灯片插件就大功告成，是不是很简单。如果你要使用淡入淡出动画，只需在zSlider的原型上添加一个淡入淡出的动画即可。
注意事项
- 请大家多多支持，下一个jquery插件将是百叶窗插件，多种动画效果随机播放
- 如果你觉得我写的对你有所帮助，请投我一票
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JQUERY
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 291 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 336 JQUERY