如何找出影响HTML图像滑块元素的Javascript部分
How to find out the section of Javascript that affects an HTML image slider element?
我有一个图像滑块,我试图找出Javascript代码的哪一部分影响了HTML元素的实际滑动行为。图像从1- 2,2 -3滑动,然后通过滑动3-2-1重置。我试着把它设置成循环,只滑动1- 2,2,3 -1。如有任何帮助,不胜感激。
HTML代码:<div id="slideShow">
<!-- module slide_show start //-->
<div style="margin:2px 0px 10px 0px;">
<div style="overflow: auto; height: 100%; margin: 0px auto;">
<div id="slideWrapper">
<div id="slideItems">
<span><a href="info.php?articles&articles_id=6"><img src="images/about-us.png" alt="" /></a></span>
<span><a href="info.php?articles&articles_id=1"><img src="images/services.png" alt="" /></a></span>
<span><a href="http://www.acehardware.com/acerewards/"><img src="images/ace-rewards.png" alt="" /></a></span>
</div>
</div>
</div>
<script type="text/javascript">
window.addEvent('domready',function(){
var slide_show = new noobSlide({
mode: 'horizontal',items: [0,1,2],size: 960,
box: $('slideItems'),
interval: 10000,
duration: 1000,autoPlay: true});
});</script>
</div>
<!-- module slide_show end //--></div>
JAVASCRIPT代码:
/*
Author:
luistar15, <leo020588 [at] gmail.com>
License:
MIT License
Class
noobSlide (rev.19-06-08)
Arguments:
Parameters - see Parameters below
Parameters:
box: dom element | required
items: dom collection | required
size: int | item size (px) | default: 240
mode: string | 'horizontal', 'vertical' | default: 'horizontal'
addButtons:{
previous: single dom element OR dom collection| default: null
next: single dom element OR dom collection | default: null
play: single dom element OR dom collection | default: null
playback: single dom element OR dom collection | default: null
stop: single dom element OR dom collection | default: null
}
button_event: string | event type | default: 'click'
handles: dom collection | default: null
handle_event: string | event type| default: 'click'
fxOptions: object | Fx.Tween options | default: {duration:500,wait:false}
interval: int | for periodical | default: 5000
autoPlay: boolean | default: false
onWalk: event | pass arguments: currentItem, currentHandle | default: null
startItem: int | default: 0
Properties:
box: dom element
items: dom collection
size: int
mode: string
buttons: object
button_event: string
handles: dom collection
handle_event: string
previousIndex: int
nextIndex: int
fx: Fx.Tween instance
interval: int
autoPlay: boolean
onWalk: function
Methods:
previous(manual): walk to previous item
manual: bolean | default:false
next(manual): walk to next item
manual: bolean | default:false
play (interval,direction,wait): auto walk items
interval: int | required
direction: string | "previous" or "next" | required
wait: boolean | required
stop(): stop auto walk
walk(item,manual,noFx): walk to item
item: int | required
manual: bolean | default:false
noFx: boolean | default:false
addHandleButtons(handles):
handles: dom collection | required
addActionButtons(action,buttons):
action: string | "previous", "next", "play", "playback", "stop" | required
buttons: dom collection | required
Requires:
mootools 1.2 core
*/
var noobSlide = new Class({
initialize: function(params){
this.items = params.items;
this.mode = params.mode || 'horizontal';
this.modes = {horizontal:['left','width'], vertical:['top','height']};
this.size = params.size || 240;
this.box = params.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');
this.button_event = params.button_event || 'click';
this.handle_event = params.handle_event || 'click';
this.onWalk = params.onWalk || null;
this.currentIndex = null;
this.previousIndex = null;
this.nextIndex = null;
this.interval = params.interval || 5000;
this.duration = params.duration || 500;
this.autoPlay = params.autoPlay || false;
this._play = null;
this.handles = params.handles || null;
if(this.handles){
this.addHandleButtons(this.handles);
}
this.buttons = {
previous: [],
next: [],
play: [],
playback: [],
stop: []
};
if(params.addButtons){
for(var action in params.addButtons){
this.addActionButtons(action, $type(params.addButtons[action])=='array' ? params.addButtons[action] : [params.addButtons[action]]);
}
}
this.fx = new Fx.Tween(this.box,$extend((params.fxOptions||{duration:this.duration,wait:false}),{property:this.modes[this.mode][0]}));
this.walk((params.startItem||0),true,true);
},
addHandleButtons: function(handles){
for(var i=0;i<handles.length;i++){
handles[i].addEvent(this.handle_event,this.walk.bind(this,[i,true]));
}
},
addActionButtons: function(action,buttons){
for(var i=0; i<buttons.length; i++){
switch(action){
case 'previous': buttons[i].addEvent(this.button_event,this.previous.bind(this,[true])); break;
case 'next': buttons[i].addEvent(this.button_event,this.next.bind(this,[true])); break;
case 'play': buttons[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'next',false])); break;
case 'playback': buttons[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false])); break;
case 'stop': buttons[i].addEvent(this.button_event,this.stop.bind(this)); break;
}
this.buttons[action].push(buttons[i]);
}
},
previous: function(manual){
this.walk((this.currentIndex>0 ? this.currentIndex-1 : this.items.length-1),manual);
},
next: function(manual){
this.walk((this.currentIndex<this.items.length-1 ? this.currentIndex+1 : 0),manual);
},
play: function(interval,direction,wait){
this.stop();
if(!wait){
this[direction](false);
}
this._play = this[direction].periodical(interval,this,[false]);
},
stop: function(){
$clear(this._play);
},
walk: function(item,manual,noFx){
if(item!=this.currentIndex){
this.currentIndex=item;
this.previousIndex = this.currentIndex + (this.currentIndex>0 ? -1 : this.items.length-1);
this.nextIndex = this.currentIndex + (this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length);
if(manual){
this.stop();
}
if(noFx){
this.fx.cancel().set((this.size*-this.currentIndex)+'px');
}else{
this.fx.start(this.size*-this.currentIndex);
}
if(manual && this.autoPlay){
this.play(this.interval,'next',true);
}
if(this.onWalk){
this.onWalk((this.items[this.currentIndex] || null), (this.handles && this.handles[this.currentIndex] ? this.handles[this.currentIndex] : null));
}
}
}
});
您只需要查看JavaScript方法的名称。
next()
-> this.walk(...)
-> this.fx.start(...)
this.fx
属性来自:
this.fx = new Fx.Tween(...)
在initialize()
方法中。阅读Prototype JavaScript库是一个好主意。
相关文章:
- 如何访问数组中的数组元素(JavaScript)
- 如何找到从中调用函数的元素(Javascript)
- 另一个元素JAVAscript中的元素位置
- 隐藏元素:Javascript属性和CSS样式之间的区别
- 如何比较数组中的元素(javascript)
- 使用一个函数来不同的元素 JavaScript
- 我需要从数组中获取一些元素 - JavaScript
- 元素 JavaScript 的读取宽度
- 识别数组的最后一个元素 - javascript
- 你如何使 Math.random 数组中的每一个第 9 个元素都是同一个元素?[JavaScript]
- 即时创建 Asp.Net 元素 Javascript
- 在提交表单上动态更改输入元素 javascript
- Kendo UI Grid 获取当前元素 javascript 的 ID
- 在我的 chrome 网上商店应用程序中禁用检查元素/JavaScript 控制台
- Canvas 元素 + Javascript 在 Chrome 和 Firefox 中工作,而不是在 Internet
- 对于在循环中不打印所有元素 - Javascript
- 选择元素 |Javascript vs Jquery.
- 无法删除 DOM 元素(JavaScript,CreateJS)
- 单击元素>JavaScript输出文档.activeElement VS.事件目标
- 当用户在文本框中输入数字时,将动态获得数组元素javascript或PHP