|
|||
![]()
Hallo Zusammen!
Ich habe eine Frage die ich selber nicht lösen kann, wüsste aber gerne wie dies zu lösen ist! Ich hoffe ihr könnt mir helfen! Auf dieser Adresse habe ich mal das hochgeladen so wie ich es bis jetzt habe! Adresse: StoutLabs - MooTools Content Slider Class v. 2.0 Wie ihr sehen könnt sind dort die Navigationspunkte 1,2,3,4,5 und einmal ein Home Button den habe ich da schoin reingesetzt weil ich gerne durch eine induviduelle <ul> <li> klassen zuweißen möchte sprich Slide 1 ist <li class="home"> weil ich eine Mootools animierte Navigation habe die ich gerne mit dieser verbinden möchte! Wie kann ich also der js Datei sagen ich möchte bei klick auf <li class="home"> den 1ten Slide? und z.b. bei <li class="about"> den 2ten slide. Das hier ist der Slider Code Code:
var SL_Slider = new Class({ //implements Implements: [Options], //variables setup numNav: new Array(), //will store number nav elements (if used) timer: null, //periodical function variable holder isSliding: 0, //flag for animation/click prevention direction: 1, //flag for direction (forward/reverse) //options options: { slideTimer: 8000, //Time between slides (1 second = 1000), a.k.a. the interval duration orientation: 'horizontal', //vertical, horizontal, or none: None will create a fading in/out transition. fade: false, //if true will fade the outgoing slide - only used if orientation is != None isPaused: false, //flag for paused state transitionTime: 1100, //Transition time (1 second = 1000) transitionType: 'cubic:out', //Transition type container: null, //container element items: null, //Array of elements for sliding itemNum: 0, //Current item number numNavActive: false, //Whether or not the number navigation will be used numNavHolder: true, //Element that holds the number navigation playBtn: null, //Play (and pause) button element prevBtn: null, //Previous button element nextBtn: null //Next button element }, //initialization initialize: function(options) { var self = this; //set options this.setOptions(options); //remove any scrollbar(s) on the container self.options.container.setStyle('overflow', "hidden"); //if there is a play/pause button, set up functionality for it if(self.options.playBtn != null) { //self.pauseIt(); self.options.playBtn.set('text', 'pause'); self.options.playBtn.addEvents({ 'click': function() { self.pauseIt(); }, 'mouseenter' : function() { this.setStyle('cursor', 'pointer'); }, 'mouseleave' : function() { } }); } //if there is a prev & next button, set up functionality for them if(self.options.prevBtn && self.options.nextBtn){ self.options.prevBtn.addEvents({ 'click' : function() { if(self.isSliding == 0){ if(self.options.isPaused == false){ $clear(self.timer); self.timer = self.slideIt.periodical(self.options.slideTimer, self, null); } self.direction = 0; self.slideIt(); } }, 'mouseenter' : function() { this.setStyle('cursor', 'pointer'); }, 'mouseleave' : function() { } }); this.options.nextBtn.addEvents({ 'click' : function() { if(self.isSliding == 0){ if(self.options.isPaused == false){ $clear(self.timer); self.timer = self.slideIt.periodical(self.options.slideTimer, self, null); } self.direction = 1; self.slideIt(); } }, 'mouseenter' : function() { this.setStyle('cursor', 'pointer'); }, 'mouseleave' : function() { } }); } //setup items (a.k.a. slides) from list self.options.items.each(function(el, i){ //f.y.i. el = the element, i = the index el.setStyle('position', "absolute"); var itemH = el.getSize().y; var itemW = el.getSize().x; if(self.options.orientation == 'vertical'){ el.setStyle('top', (-1 * itemH)); el.setStyle('left', 0); }else if(self.options.orientation == 'none') { el.setStyle('left', 0); el.setStyle('top', 0); el.set('opacity', 0); }else{ el.setStyle('left', (-1 * itemW)); } // -- Number nav setup if(self.options.numNavActive == true){ //create numbered navigation boxes, and insert into the 'num_nav' ul) var numItem = new Element('li', {id: 'num'+i}); var numLink = new Element('a', { 'class': 'numbtn', 'html': (i+1) }); numItem.adopt(numLink); self.options.numNavHolder.adopt(numItem); self.numNav.push(numLink); numLink.set('morph', {duration: 100, transition: Fx.Transitions.linear, link: 'ignore'}); numLink.addEvents({ 'click' : function(){ self.numPress(i); }, 'mouseenter' : function() { this.setStyle('cursor', 'pointer'); } }); //set initial number to active state if(i == self.options.itemNum){ var initNum = self.numNav[i]; initNum.addClass('active'); } } //end if num nav 'active' }); }, //startup method start: function() { var self = this; self.slideIt(self.options.itemNum); //initialize first slide if(self.options.isPaused == false){ self.timer = self.slideIt.periodical(self.options.slideTimer, self, null); if(self.options.playBtn) self.options.playBtn.set('text', 'pause'); } else{ //self.pauseIt(); if(self.options.playBtn) self.options.playBtn.set('text', 'play'); } }, slideIt: function(passedID) { var self = this; //get item to slide out var curItem = self.options.items[self.options.itemNum]; if(self.options.numNavActive == true){ var curNumItem = self.numNav[self.options.itemNum]; } //check for passedID presence if(passedID != null) { if(self.options.itemNum != passedID){ if(self.options.itemNum > passedID) { self.direction = 0; } else { self.direction = 1; } self.options.itemNum = passedID; } } else{ self.changeIndex(); } //now get item to slide in using new index var newItem = self.options.items[self.options.itemNum]; if(self.direction == 0){ var curX = self.options.container.getSize().x; var newX = (-1 * newItem.getSize().x); var curY = self.options.container.getSize().y; var newY = (-1 * newItem.getSize().y); } else{ var curX = (-1 * self.options.container.getSize().x); var newX = newItem.getSize().x; var curY = (-1 * self.options.container.getSize().y); var newY = newItem.getSize().y; } //add/remove active number's highlight if(self.options.numNavActive == true){ var newNumItem = self.numNav[self.options.itemNum]; newNumItem.addClass('active'); } //set up our animation stylings var item_in = new Fx.Morph(newItem, { duration: self.options.transitionTime, transition: self.options.transitionType, link: 'ignore', onStart: function(){ self.isSliding = 1; //prevents extra clicks }, onComplete: function(){ self.isSliding = 0; //prevents extra clicks } }); if(self.options.orientation == 'vertical'){ if(self.options.fade == true){item_in.start({'opacity':[0,1],'top' : [newY, 0]});} else{item_in.start({'top' : [newY, 0]});} }else if(self.options.orientation == 'none') { item_in.start({'opacity':[0,1]}); }else{ if(self.options.fade == true){item_in.start({'opacity':[0,1],'left' : [newX, 0]});} else{item_in.start({'left' : [newX, 0]});} } if(curItem != newItem){ var item_out = new Fx.Morph(curItem, { duration: self.options.transitionTime, transition: self.options.transitionType, link: 'ignore' }); if(self.options.numNavActive == true){ curNumItem.removeClass('active'); } if(self.options.orientation == 'vertical'){ if(self.options.fade == true){item_out.start({'opacity':[0],'top' : [(curY)]});} else{item_out.start({'top' : [(curY)]});} }else if(self.options.orientation == 'none') { item_out.start({'opacity':[1,0]}); }else{ if(self.options.fade == true){item_out.start({'opacity':[0],'left' : [(curX)]});} else{item_out.start({'left' : [(curX)]});} } } }, //-------------------------------------------------------------------------------------------------------- //supplementary functions (mini-functions) //-------------------------------------------------------------------------------------------------------- pauseIt: function () { var self = this; //only move if not currently moving if(self.isSliding == 0){ if(self.options.isPaused == false){ self.options.isPaused = true; $clear(self.timer); self.options.playBtn.set('text', 'play'); } else{ self.options.isPaused = false; self.slideIt(); self.timer = self.slideIt.periodical(self.options.slideTimer, this, null); self.options.playBtn.set('text', 'pause'); } } //end if not sliding }, changeIndex: function() { var self = this; var numItems = self.options.items.length; //get number of slider items //change index based on value of 'direction' parameter if(self.direction == 1){ if(self.options.itemNum < (numItems - 1)){ self.options.itemNum++; } else{ self.options.itemNum = 0; } } else if(self.direction == 0){ if(self.options.itemNum > 0){ self.options.itemNum--; } else{ self.options.itemNum = (numItems - 1); } } }, numPress: function (theIndex) { var self = this; if((self.isSliding == 0) && (self.options.itemNum != theIndex)){ if(self.options.isPaused == false){ $clear(self.timer); self.timer = self.slideIt.periodical(self.options.slideTimer, this, null); } self.slideIt(theIndex); } } //------------------------ end supp. functions -----------------------------------------// }); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////// I N I T///////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function initMainResize(){ window.addEvent('resize', onResize); } function onResize(){ updateMainNavPosition(posNav); } Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>StoutLabs - MooTools Content Slider Class v. 2.0</title> <link href="css/slider.css" rel="stylesheet" type="text/css" media="screen"/> <script type="text/javascript" src="js/moo_12.js"></script> <script type="text/javascript" src="js/sl_slider.js"></script> <script type="text/javascript" src="bg_resize.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { //slider variables for making things easier below var itemsHolder = $('container'); var myItems = $$(itemsHolder.getElements('.item')); //controls for slider var theControls = $('controls1'); var numNavHolder = $(theControls.getElement('ul')); var thePlayBtn = $(theControls.getElement('.play_btn')); var thePrevBtn = $(theControls.getElement('.prev_btn')); var theNextBtn = $(theControls.getElement('.next_btn')); //create instance of the slider, and start it up var mySlider = new SL_Slider({ slideTimer: 6000, orientation: 'horizontal', //vertical, horizontal, or none: None will create a fading in/out transition. fade: false, //if true will fade the outgoing slide - only used if orientation is != None isPaused: true, container: itemsHolder, items: myItems, numNavActive: true, numNavHolder: numNavHolder, playBtn: thePlayBtn, prevBtn: thePrevBtn, nextBtn: theNextBtn }); mySlider.start(); //adding a little animated rollover highlight to the play and prev/next buttons var origBkgdColor = thePlayBtn.getStyle('background-color'); var newBkgdColor = "#80301D"; var btnArray = new Array(thePlayBtn, thePrevBtn, theNextBtn); btnArray.each(function(e, i){ e.set('tween', {duration: 350, transition: 'cubic:out', link: 'cancel'}); e.addEvents({ 'mouseenter' : function() { this.tween('background-color', newBkgdColor); }, 'mouseleave' : function() { this.tween('background-color', origBkgdColor); } }); }); }); </script> </head> <body> <div id="wrapper"> <h1>StoutLabs - Mootools Content (div) Slider Class v 2.0</h1> <p class="linkback"><a href="http://stoutlabs.com/blog/view/updated_mootools_content_slider_class_v2/">< Go back to related blog post</a></p> <h2>Horizontal Slide - With Fade</h2> <div id="container"> <div class="item"> <div id="bgdiv"><img id="bgimg" src="flash_bg.jpg" /></div> </div> <div class="item"> <h3>Item 2 Title</h3> <p>Fusce aliquam blandit elit. Suspendisse lectus massa, ultricies sed, hendrerit in, tempor non, nunc.</p> </div> <div class="item"> <h3>Item 3 Title</h3> <p>Aenean neque. Mauris elementum sem vel nisi. Quisque est turpis, gravida non, porta id, varius nec, pede. Mauris tincidunt nisl a nulla condimentum commodo. Phasellus sem. Aenean enim dolor, facilisis quis, viverra ac, molestie sit amet, lectus. In porttitor laoreet massa.</p> <p>Proin arcu dolor, ullamcorper tristique, placerat nec, scelerisque placerat, massa. Ut enim purus.</p> </div> <div class="item"> <h3>Item 4 Title</h3> <p>This is item four’s text. Item text here. Lorem ipsum dolor.</p> <p><img src="http://xhtmlforum.de/images/fpo_img.jpg" alt="tester image" /></p> </div> <div class="item"> <h3>Item 5 Title</h3> <p>Annnd item 5’s text is here. Item text here. Lorem ipsum dolor.</p> </div> </div><!-- end container div --> <div id="controls1"> <div class="prev_btn">< prev</div> <div class="next_btn">next ></div> <div class="num_nav"> <ul></ul></div> </div> <div id="versions"> <h3>Example Versions: </h3> <a href="index.htm" class="activenav">horizontal, with all options</a> | <a href="vert.htm">vertical, with prev / next only</a> | <a href="fade.htm">fade only, with no controls</a> </div> </div> <!-- end wrapper div --> </body> </html> Code:
<ul id="nav"> <li class="HOME"><a href="#">HOME</a> <audio id="beep-two" preload="auto"> <source src="audio/clack.mp3"></source> <source src="audio/clack.m4a"></source> <source src="audio/clack.ogg"></source> </audio> </li> <li class="separator"></li> <li class="ABOUT"><a href="#">ABOUT</a> <audio id="beep-two" preload="auto"> <source src="audio/clack.mp3"></source> <source src="audio/clack.m4a" controls></source> <source src="audio/clack.ogg" controls></source> </audio> </li></ul> Könntet ihr mir helfen und mir vllt zeigen wie man die .js Datei umbauen muss damit ich die einzelnen <li>'s jedem einzelnen Slide zuweisen kann? Ich bedanke misch schonmal für die Antworten udn für das lesen! Gruß, Crixon Geändert von crixon (30.01.2012 um 13:35 Uhr) |
Sponsored Links |
![]() |
Stichwörter |
css3, html5, jquery, mootools |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dynamische Größen | Killhunter | CSS | 0 | 14.05.2011 16:56 |
Problem mit 3 Navigationsebene im CSS-Menü im Internet Explorer | Chellisa | CSS | 0 | 15.08.2008 10:28 |
Multi-Level Navigation mit Grafiken | koncrete | CSS | 3 | 02.08.2008 02:28 |
Probleme beim ausrichten | Mojo83 | CSS | 4 | 25.06.2008 19:54 |
Css Pop-Up Menü rechts ausrichten im Internet Explorer | mbuse | CSS | 0 | 11.09.2006 13:18 |