Skip to content

Commit 88cb6dd

Browse files
zhangciwuzhangciwu
committed
com
1 parent a195c90 commit 88cb6dd

File tree

2 files changed

+210
-47
lines changed

2 files changed

+210
-47
lines changed

Diff for: ‎Readme.md

+11
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,17 @@
22

33
基于Magic-Slider修改。
44

5+
更新信息：
6+
7+
2013-6-25
8+
设置中增加externalTriggerHighlightClass，外部触发器的高亮class设定
9+
设置中增加functionsOut，把一些方法传出去（并非最好的办法），待改进
10+
设置中增加firstPanelLoadNoAnimate，加载第一个panel，不要有动画（bool）
11+
设置中增加eventBeforeSlideMove，这是一个event，在panel移动之前触发。
12+
增加触摸功能（很基础的）
13+
改进：jquery为noconlict模式时也可以使用。
14+
15+
516
based on Magic-Slider
617

718
MIT license

Diff for: ‎js/magic-slider.js

+199-47
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
1-
/*
2-
magic-slider ... Version 0.1.0
3-
https://github.com/orangenwerk/magic-slider / http://orangenwerk.github.com/magic-slider/
4-
**************************************************************************************************
5-
based on jQuery Coda-Slider v2.0 / Coda-Slider v2.1 / moutardeSlider
6-
Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
7-
Coda-Slider v2.1 - https://github.com/jgillman/Coda-Slider-2.1
8-
moutardeSlider - https://github.com/fstephany/moutardeSlider
9-
MIT license.
10-
**************************************************************************************************
11-
improvenments by Austin Strange
1+
/*!
2+
w-magic-slider (modify by w)
3+
original info:
4+
magic-slider ... Version 0.1.0
5+
https://github.com/orangenwerk/magic-slider
6+
MIT license
127
*/
138

14-
$.fn.magicSlider = function(settings) {
9+
10+
window.jQuery.fn.magicSlider = function(settings) {
11+
var $=window.jQuery;
1512

1613
settings = $.extend({
1714
autoHeight: true,
@@ -31,13 +28,19 @@ $.fn.magicSlider = function(settings) {
3128
dynamicTabsContent: "title", // "title" / "count"
3229
externalTriggerSelector: "a.xtrig",
3330
highlightExternalTrigger: false,
31+
externalTriggerHighlightClass:'current',
32+
functionsOut:{},
3433
firstPanelToLoad: 1,
34+
firstPanelLoadNoAnimate: false,
3535
panelTitleSelector: "h2.title",
3636
slideEaseDuration: 1000,
3737
slideEaseFunction: "swing",
3838
slideDirection: "horizontal", // "horizontal" / "vertical"
3939
carousel: false,
4040
changeSliderHeadline: false,
41+
eventBeforeSlideMove:function(targetPanelIndex,panelCount){},//eventBeforeSlideMove(targetPanelIndex)
42+
touchSlideSwitch:true,
43+
touchSlideTriggerPixels:50,
4144
sliderHeadlineSelector: "#magic_slider_head" // Selector for headline
4245
}, settings);
4346

@@ -46,6 +49,8 @@ $.fn.magicSlider = function(settings) {
4649
var slider = $(this),
4750
sliderID = slider.attr('id');
4851

52+
var isAnimating=false;
53+
4954
// If Headlineanimation wanted
5055
if ( settings.changeSliderHeadline == true ){ var panelHeadlines = new Array(); };
5156

@@ -63,6 +68,7 @@ $.fn.magicSlider = function(settings) {
6368
};
6469
};
6570
});
71+
//console.log('panelsHeights',panelsHeights);
6672

6773
var biggestPanel = Array_max( panelsHeights );
6874

@@ -76,8 +82,8 @@ $.fn.magicSlider = function(settings) {
7682
// Slider vars
7783
var panelWidth = slider.find('.' + sliderID + '_panel').width(),
7884
panelCount = slider.find('.' + sliderID + '_panel').size(),
79-
navClicks = 0; // Used if autoSlideStopWhenClicked = true
80-
last = false; // Used in carousel mode
85+
navClicks = 0, // Used if autoSlideStopWhenClicked = true
86+
last = false, // Used in carousel mode
8187
clon = ''; // Used in carousel mode => 'first' / 'last'
8288

8389
// Special vars depend on Slider-Type
@@ -106,6 +112,8 @@ $.fn.magicSlider = function(settings) {
106112
}
107113
};
108114

115+
var classNeedRemove=null;
116+
109117
// Surround the collection of panel divs with a container div (wide enough for all panels to be lined up end-to-end)
110118
$('.' + sliderID + '_panel', slider).wrapAll('<div class="' + sliderID + '_panel_container panel-container"></div>');
111119
// Specify the width of the container div (wide enough for all panels to be lined up end-to-end)
@@ -123,10 +131,10 @@ $.fn.magicSlider = function(settings) {
123131
} else {
124132
var currentPanel = 1;
125133
};
126-
moveToPanel(currentPanel);
134+
classNeedRemove=settings.externalTriggerHighlightClass.replace('{panel_num}',currentPanel);;
135+
moveToPanel(currentPanel,settings.firstPanelLoadNoAnimate);
127136

128-
// Left-Nav = click
129-
$("#magic-nav-left-" + sliderID + " a").click(function(){
137+
function moveLeft(){
130138
navClicks++;
131139
var navList = $(this).parents('div.magic-slider-wrapper').find('.magic-nav ul');
132140
if (currentPanel == 1 && !settings.carousel) {
@@ -144,10 +152,9 @@ $.fn.magicSlider = function(settings) {
144152
moveToPanel(currentPanel);
145153
if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
146154
return false;
147-
});
155+
}
148156

149-
// Right-Nav = click
150-
$('#magic-nav-right-' + sliderID + ' a').click(function(){
157+
function moveRight(){
151158
navClicks++;
152159
var navList = $(this).parents('div.magic-slider-wrapper').find('.magic-nav ul');
153160
if (currentPanel == panelCount && !settings.carousel) {
@@ -165,6 +172,16 @@ $.fn.magicSlider = function(settings) {
165172
moveToPanel(currentPanel);
166173
if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
167174
return false;
175+
}
176+
177+
// Left-Nav = click
178+
$("#magic-nav-left-" + sliderID + " a").click(function(){
179+
return moveLeft()
180+
});
181+
182+
// Right-Nav = click
183+
$('#magic-nav-right-' + sliderID + ' a').click(function(){
184+
return moveRight()
168185
});
169186

170187
// If we need a dynamic menu
@@ -213,16 +230,31 @@ $.fn.magicSlider = function(settings) {
213230
});
214231
});
215232

233+
234+
216235
// External triggers (anywhere on the page)
217236
$(settings.externalTriggerSelector).each(function() {
237+
var $this=$(this);
218238
// Make sure this only affects the targeted slider
219239
if ( sliderID == $(this).attr("rel") ) {
220-
$(this).bind("click", function() {
240+
$this.bind("click", function() {
221241
navClicks++;
222-
targetPanel = parseInt($(this).attr("href").slice(1));
242+
var re=/\#(.*)$/;
243+
try{
244+
targetPanel = parseInt(re.exec( $(this).attr("href"))[1]);
245+
}catch(e){
246+
return false;
247+
}
223248
if ( settings.highlightExternalTrigger == true ) {
224-
$('a[rel="' + sliderID + '"]').removeClass("current");
225-
$('a[rel="' + sliderID + '"][href="#' + targetPanel +'"]').addClass("current");
249+
$('a[rel="' + sliderID + '"]')
250+
.removeClass(settings.externalTriggerHighlightClass.replace('{panel_num}',targetPanel));
251+
if (classNeedRemove){
252+
$('a[rel="' + sliderID + '"]')
253+
.removeClass(classNeedRemove);
254+
}
255+
$('a[rel="' + sliderID + '"][href$="#' + targetPanel +'"]')
256+
.addClass(settings.externalTriggerHighlightClass.replace('{panel_num}',targetPanel));
257+
classNeedRemove= settings.externalTriggerHighlightClass.replace('{panel_num}',targetPanel);
226258
// $(this).addClass("current");
227259
};
228260
offset = - (panelWidth*(targetPanel - 1));
@@ -267,18 +299,25 @@ $.fn.magicSlider = function(settings) {
267299
});
268300
};
269301

270-
function alterPanelHeight(x) {
302+
function alterPanelHeight(x,noAnimation) {
271303
if (settings.autoHeight) {
272-
panelHeight = $('.' + sliderID + '_panel:eq(' + x + ')', slider).height()
273-
slider.animate({ height: panelHeight }, settings.autoHeightEaseDuration, settings.autoHeightEaseFunction);
304+
panelHeight = $('.' + sliderID + '_panel:eq(' + x + ')', slider).height();
305+
if (noAnimation){
306+
slider.css({ height: panelHeight });
307+
}else{
308+
309+
slider.animate({ height: panelHeight }, settings.autoHeightEaseDuration, settings.autoHeightEaseFunction);
310+
}
274311
};
275312
};
276313

277314
function autoSlide() {
315+
if(!settings.autoCycle){
316+
return false;
317+
}
278318
if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
279319
if (currentPanel == panelCount) {
280-
if(!settings.autoCycle)
281-
return false;
320+
282321
currentPanel = 1;
283322
} else {
284323
currentPanel += 1;
@@ -289,42 +328,82 @@ $.fn.magicSlider = function(settings) {
289328
};
290329
};
291330

292-
function moveToPanel(targetPanelIndex) {
331+
function moveToPanel(direction,noAnimation) {
332+
var targetPanelIndex;
333+
if (typeof direction=='number'){
334+
targetPanelIndex=direction;
335+
}else{
336+
targetPanelIndex =currentPanel+ ( ( direction === 'right' )?1:-1);
337+
targetPanelIndex = (targetPanelIndex-1) % panelCount+1;
338+
(targetPanelIndex<1) && (targetPanelIndex+=panelCount);
339+
}
340+
341+
342+
343+
//console.log('moveToPanel', targetPanelIndex);
344+
345+
settings.eventBeforeSlideMove(targetPanelIndex,panelCount);
293346
var navList = $('#magic-nav-' + sliderID + ' ul');
294347
var currentLink = navList.find('li:eq(' + (targetPanelIndex - 1) + ') a');
295348
navList.find('a').removeClass('current');
296349
currentLink.addClass('current');
297350
if ( last == true ) {
298-
doTheDouble( clon )
351+
doTheDouble( clon );
299352
last = false;
300353
clon = '';
301354
} else {
302-
doThePanelMove(targetPanelIndex);
355+
doThePanelMove(targetPanelIndex,noAnimation);
303356
};
304357
if ( settings.changeSliderHeadline == true ){
305358
$(settings.sliderHeadlineSelector).html( panelHeadlines[ targetPanelIndex - 1 ] );
306359
};
360+
307361
if ( settings.highlightExternalTrigger == true ) {
308-
$('a[rel="' + sliderID + '"]').removeClass("current");
309-
$('a[rel="' + sliderID + '"][href="#' + targetPanelIndex +'"]').addClass("current"); // $(this).addClass("current");
362+
$('a[rel="' + sliderID + '"]')
363+
.removeClass(settings.externalTriggerHighlightClass.replace('{panel_num}',targetPanelIndex));
364+
if (classNeedRemove){
365+
$('a[rel="' + sliderID + '"]')
366+
.removeClass(classNeedRemove);
367+
}
368+
$('a[rel="' + sliderID + '"][href$="#' + targetPanelIndex +'"]')
369+
.addClass(settings.externalTriggerHighlightClass.replace('{panel_num}',targetPanelIndex));
370+
classNeedRemove= settings.externalTriggerHighlightClass.replace('{panel_num}',targetPanelIndex);
371+
// $(this).addClass("current");
310372
};
311373
slider.find('div.' + sliderID + '_panel_container div.' + sliderID + '_panel').removeClass('current');
312374
slider.find('div.' + sliderID + '_panel_container div.' + sliderID + '_panel:eq('+ (targetPanelIndex - 1) + ')').addClass('current');
375+
currentPanel=targetPanelIndex;
313376
};
314377

315-
function doThePanelMove(targetPanelIndex) {
316-
if (settings.slideDirection == "horizontal"){
317-
$('.' + sliderID + '_panel_container', slider).animate(
318-
{ marginLeft: -1 * panelWidth*(targetPanelIndex -1) },
319-
settings.slideEaseDuration,
320-
settings.slideEaseFunction
321-
);
322-
} else {
323-
$('.' + sliderID + '_panel_container', slider).animate(
324-
{ marginTop: -1 * panelContaineroffset[ targetPanelIndex -1 ] },
325-
settings.slideEaseDuration,
326-
settings.slideEaseFunction
327-
);
378+
function doThePanelMove(targetPanelIndex,noAnimation) {
379+
function finished(){
380+
isAnimating=false;
381+
}
382+
if (noAnimation){
383+
if (settings.slideDirection == "horizontal"){
384+
$('.' + sliderID + '_panel_container', slider).css(
385+
{ marginLeft: -1 * panelWidth*(targetPanelIndex -1) }
386+
387+
);
388+
} else {
389+
$('.' + sliderID + '_panel_container', slider).css(
390+
{ marginTop: -1 * panelContaineroffset[ targetPanelIndex -1 ] }
391+
);
392+
}
393+
}else{
394+
if (settings.slideDirection == "horizontal"){
395+
$('.' + sliderID + '_panel_container', slider).animate(
396+
{ marginLeft: -1 * panelWidth*(targetPanelIndex -1) },
397+
settings.slideEaseDuration,
398+
settings.slideEaseFunction
399+
);
400+
} else {
401+
$('.' + sliderID + '_panel_container', slider).animate(
402+
{ marginTop: -1 * panelContaineroffset[ targetPanelIndex -1 ] },
403+
settings.slideEaseDuration,
404+
settings.slideEaseFunction
405+
);
406+
}
328407
}
329408
};
330409

@@ -375,5 +454,78 @@ $.fn.magicSlider = function(settings) {
375454
return Math.max.apply( Math, array );
376455
};
377456

457+
//throw
458+
//$.fn.magicSlider.moveToPanel=moveToPanel;
459+
var moveTo= settings.functionsOut.moveTo=function(direction,noAnimate){
460+
461+
var targetPanelIndex;
462+
if (typeof direction=='number'){
463+
targetPanelIndex=direction;
464+
currentPanel =targetPanelIndex;
465+
moveToPanel(targetPanelIndex,noAnimate);
466+
alterPanelHeight(targetPanelIndex-1,noAnimate);
467+
}else{
468+
targetPanelIndex =currentPanel+ ( ( direction === 'right' )?1:-1);
469+
targetPanelIndex = (targetPanelIndex-1) % panelCount +1;
470+
(targetPanelIndex<1)&&(targetPanelIndex+=panelCount);
471+
472+
if (direction=='left') {
473+
return moveLeft()
474+
}else if (direction=='right'){
475+
return moveRight()
476+
}
477+
}
478+
//console.log('move to ',direction,noAnimate,targetPanelIndex,currentPanel);
479+
480+
};
481+
//moveToPanel;
482+
483+
484+
function bindTouchMoveEvent($ele,eventMap,options){
485+
options= $.extend( {
486+
pixelsTrigger:20
487+
},options);
488+
489+
var state='ready';
490+
var beginPoint=[];
491+
492+
493+
$ele.bind('touchstart touchmove touchend',function(event){
494+
var touch = event.originalEvent.touches[0];
495+
//$ele.append('<p>'+ event.type+" Touch x:" + touch.pageX + ", y:" + touch.pageY+'</p>');
496+
if (event.type=='touchstart'){
497+
if (state=='ready'){
498+
state='touching';
499+
beginPoint=[touch.pageX ,touch.pageY];
500+
}
501+
}else if(event.type=='touchmove'){
502+
if (state=='touching'){
503+
if (touch.pageX>beginPoint[0]+options.pixelsTrigger && Math.abs(touch.pageY-beginPoint[1]) < options.pixelsTrigger && eventMap['right']){
504+
eventMap['right']();
505+
state='ready';
506+
}else if (touch.pageX<beginPoint[0]-options.pixelsTrigger && Math.abs(touch.pageY-beginPoint[1]) < options.pixelsTrigger && eventMap['left']){
507+
eventMap['left']();
508+
state='ready';
509+
}
510+
}
511+
}
512+
})
513+
}
514+
515+
if (settings.touchSlideSwitch){
516+
bindTouchMoveEvent(slider,{
517+
'left':function(){
518+
moveTo('right');
519+
},
520+
'right':function(){
521+
moveTo('left');
522+
}
523+
},{pixelsTrigger:settings.touchSlideTriggerPixels})
524+
}
525+
//this.moveToPanel=moveToPanel;
526+
527+
528+
529+
378530
});
379531
};

0 commit comments

Comments
 (0)