Javascript Slideshow mit DIV/Table

XantypiaxD

Hey Com.

Ich hoffe ihr könnt mir weiterhelfen.

Ich möchte ein Div mit Hilfe von Javascript sliden lassen.
Dies soll geschehen, sobald die Seite aufgerufen wird.

Dazu meine erste Frage:

Ist es möglich, dass wenn mein Div z.B. 900px Breite besitzt und der Content 500px besitzt. Dieses 900px breite Div durch den Content sliden zu lassen? (horizontal)

Ich möchte außerdem, dass wenn ich mit der Maus über das Div "fahre", die Slideshow anhält.

Wie bekomme ich das gelöst? Hat jemand vielleicht einen Lösungsansatz?
Kenne mich nicht wirklich mit Javascript aus.

Danke

MfG XantypiaxD

Dodo

Es ist so ziemlich alles Möglich, was du dir vorstellen kannst, wenn man weiß, wie

Wenn du dich "nicht wirklich" mit JavaScript auskennst, empfehle ich die jQuery. Das vereinfacht das etwas, wenn auch die Programmierung - meiner Meinung nach - unsauberer wird.

Such einfach mal in der Suchmaschine deiner Wahl nach "jQuery Gallery". Mir persönlich gefällt die AD-Gallery recht gut.

XantypiaxD

ich will ja eigentlich nur eine mischung aus einem marquee element und einer onmouseover funktion xD

aber geht das, dass ich dem div eine größe zuweise und dass dann durch den content laufen lasse?

Dodo

marquee ist veraltet und sollte nicht mehr verwendet werden.

Ja, das geht.

synaptic

das einzige was du unter jquery brauchst is die animate-function und ja du kannst so jedes div bewegen

XantypiaxD

Hab schon ein paar scripts zu sogenannten Carousel's gesehen, doch keinen, der geschweige ein Div slidet oder das ganze automatisch macht..

Ich steh im Stau..

synaptic

leider hat die api von jquery grad einen am baum aber evtl klappts mit nem deeplink: http://api.jquery.com/animate/

animieren is an sich ganz easy...

oder guck hier:
http://home.arcor.de/synaptic/JS_basics/layer.html

XantypiaxD

Erstmal Danke! Aber schlau werde ich daraus immer noch nicht tut mir leid. Könnte wer von euch schlauen Füchsen mir einmal ein kleines schnuckeliges Script für eine Div Slideshow mit stopfunktion (wenn man über das div fährt) schreiben?

Dodo

Also, wenn es von uns gemacht haben willst, dann verschieb ich das ins Job-Forum.
Dann ist das keine Hilfestellung, sondern eine Arbeits-Delegation.

Wenn du sowas haben willst, solltest du es entweder lernen, oder anderen etwas für ihre Mühe geben.

XantypiaxD

k ty.. brauchst es nicht verschieben.. habt genug geholfen ty

synaptic

ööhm der zweite link von mir is doch ne anleitung.. was kapierste daran denn nich?
und zeig mal was du bereits hast, dann kann man dir helfen

XantypiaxD

Hab jetzt ein schönes Script gefunden!

Ich müsste nur wissen, wie man hinbekommt, dass man, wenn die Seite geladen ist, die Slideshow anfängt und wenn man mit der Maus über das Div kommt aufhört und wenn man mit der Maus wieder vom Div "runter geht", die Slideshow wieder weiterläuft.

Hier der jQuery Code:

Code

/*
 * jQuery SmoothDivScroll 1.1
 *
 * Copyright (c) 2010 Thomas Kahn
 * Licensed under the GPL license.
 *
 * http://www.maaki.com/thomas/SmoothDivScroll/
 *
 * Depends:
 * jquery.ui.widget.js
 *
 */
(function($){$.widget("thomaskahn.smoothDivScroll",{options:{scrollingHotSpotLeft:"div.scrollingHotSpotLeft",scrollingHotSpotRight:"div.scrollingHotSpotRight",scrollableArea:"div.scrollableArea",scrollWrapper:"div.scrollWrapper",hiddenOnStart:false,ajaxContentURL:"",countOnlyClass:"",scrollStep:3,scrollInterval:10,mouseDownSpeedBooster:3,autoScroll:"",autoScrollDirection:"right",autoScrollStep:5,autoScrollInterval:10,visibleHotSpots:"",hotSpotsVisibleTime:5,startAtElementId:""},_create:function(){var self=this,o=this.options,el=this.element;el.data("scrollWrapper",el.find(o.scrollWrapper));el.data("scrollingHotSpotRight",el.find(o.scrollingHotSpotRight));el.data("scrollingHotSpotLeft",el.find(o.scrollingHotSpotLeft));el.data("scrollableArea",el.find(o.scrollableArea));el.data("speedBooster",1);el.data("motherElementOffset",el.offset().left);el.data("scrollXPos",0);el.data("hotSpotWidth",el.find(o.scrollingHotSpotLeft).width());el.data("scrollableAreaWidth",0);el.data("startingPosition",0);el.data("rightScrollInterval",null);el.data("leftScrollInterval",null);el.data("autoScrollInterval",null);el.data("hideHotSpotBackgroundsInterval",null);el.data("previousScrollLeft",0);el.data("pingPongDirection","right");el.data("getNextElementWidth",true);el.data("swapAt",null);el.data("startAtElementHasNotPassed",true);el.data("swappedElement",null);el.data("originalElements",el.data("scrollableArea").children(o.countOnlyClass));el.data("visible",true);el.data("initialAjaxContentLoaded",false);el.data("enabled",true);el.data("scrollWrapper").scrollLeft(el.data("startingPosition"));if(o.autoScroll!=="always"){switch(o.visibleHotSpots){case"always":self.showHotSpotBackgrounds();break;case"onstart":self.showHotSpotBackgrounds();el.data("hideHotSpotBackgroundsInterval",setTimeout(function(){self.hideHotSpotBackgrounds("slow")},(o.hotSpotsVisibleTime*1000)));break;default:break}}el.data("scrollingHotSpotRight").bind("mousemove",function(e){var x=e.pageX-(this.offsetLeft+el.data("motherElementOffset"));el.data("scrollXPos",Math.round((x/el.data("hotSpotWidth"))*o.scrollStep));if(el.data("scrollXPos")===Infinity){el.data("scrollXPos",0)}});el.data("scrollingHotSpotRight").bind("mouseover",function(){if((o.autoScroll==="onstart"&&el.data("autoScrollInterval")!==null)){clearInterval(el.data("autoScrollInterval"));el.data("autoScrollInterval",null);self._trigger("autoScrollIntervalStopped")}el.data("rightScrollInterval",setInterval(function(){if(el.data("scrollXPos")>0&&el.data("enabled")){el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()+(el.data("scrollXPos")*el.data("speedBooster")));self._showHideHotSpots()}},o.scrollInterval));self._trigger("mouseOverRightHotSpot")});el.data("scrollingHotSpotRight").bind("mouseout",function(){clearInterval(el.data("rightScrollInterval"));el.data("scrollXPos",0)});el.data("scrollingHotSpotRight").bind("mousedown",function(){el.data("speedBooster",o.mouseDownSpeedBooster)});$("body").bind("mouseup",function(){el.data("speedBooster",1)});el.data("scrollingHotSpotLeft").bind("mousemove",function(e){var x=el.data("scrollingHotSpotLeft").innerWidth()-(e.pageX-el.data("motherElementOffset"));el.data("scrollXPos",Math.round((x/el.data("hotSpotWidth"))*o.scrollStep));if(el.data("scrollXPos")===Infinity){el.data("scrollXPos",0)}});el.data("scrollingHotSpotLeft").bind("mouseover",function(){if((o.autoScroll==="onstart"&&el.data("autoScrollInterval")!==null)){clearInterval(el.data("autoScrollInterval"));el.data("autoScrollInterval",null);self._trigger("autoScrollIntervalStopped")}el.data("leftScrollInterval",setInterval(function(){if(el.data("scrollXPos")>0&&el.data("enabled")){el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()-(el.data("scrollXPos")*el.data("speedBooster")));self._showHideHotSpots()}},o.scrollInterval));self._trigger("mouseOverLeftHotSpot")});el.data("scrollingHotSpotLeft").bind("mouseout",function(){clearInterval(el.data("leftScrollInterval"));el.data("scrollXPos",0)});el.data("scrollingHotSpotLeft").bind("mousedown",function(){el.data("speedBooster",o.mouseDownSpeedBooster)});$(window).bind("resize",function(){if(!(o.hiddenOnStart)){self._showHideHotSpots()}self._trigger("windowResized")});if(o.ajaxContentURL.length>0){self.replaceContent(o.ajaxContentURL)}else{self.recalculateScrollableArea()}if(o.hiddenOnStart){self.hide()}if((o.autoScroll.length>0)&&!(o.hiddenOnStart)&&(o.ajaxContentURL.length<=0)){self.startAutoScroll()}},showHotSpotBackgrounds:function(fadeSpeed){var self=this,el=this.element;if(fadeSpeed!==undefined){el.data("scrollingHotSpotLeft").css("opacity","0.0");el.data("scrollingHotSpotRight").css("opacity","0.0");el.data("scrollingHotSpotLeft").addClass("scrollingHotSpotLeftVisible");el.data("scrollingHotSpotRight").addClass("scrollingHotSpotRightVisible");el.data("scrollingHotSpotLeft").fadeTo(fadeSpeed,0.35);el.data("scrollingHotSpotRight").fadeTo(fadeSpeed,0.35)}else{el.data("scrollingHotSpotLeft").addClass("scrollingHotSpotLeftVisible");el.data("scrollingHotSpotLeft").removeAttr("style");el.data("scrollingHotSpotRight").addClass("scrollingHotSpotRightVisible");el.data("scrollingHotSpotRight").removeAttr("style")}self._showHideHotSpots()},hideHotSpotBackgrounds:function(fadeSpeed){var el=this.element;if(fadeSpeed!==undefined){el.data("scrollingHotSpotLeft").fadeTo(fadeSpeed,0.0,function(){el.data("scrollingHotSpotLeft").removeClass("scrollingHotSpotLeftVisible")});el.data("scrollingHotSpotRight").fadeTo(fadeSpeed,0.0,function(){el.data("scrollingHotSpotRight").removeClass("scrollingHotSpotRightVisible")})}else{el.data("scrollingHotSpotLeft").removeClass("scrollingHotSpotLeftVisible");el.data("scrollingHotSpotLeft").removeAttr("style");el.data("scrollingHotSpotRight").removeClass("scrollingHotSpotRightVisible");el.data("scrollingHotSpotRight").removeAttr("style")}},_showHideHotSpots:function(){var self=this,el=this.element,o=this.options;if(o.autoScroll!=="always"){if(el.data("scrollableAreaWidth")<=(el.data("scrollWrapper").innerWidth())){el.data("scrollingHotSpotLeft").hide();el.data("scrollingHotSpotRight").hide()}else if(el.data("scrollWrapper").scrollLeft()===0){el.data("scrollingHotSpotLeft").hide();el.data("scrollingHotSpotRight").show();self._trigger("scrollLeftLimitReached");clearInterval(el.data("leftScrollInterval"));el.data("leftScrollInterval",null)}else if(el.data("scrollableAreaWidth")<=(el.data("scrollWrapper").innerWidth()+el.data("scrollWrapper").scrollLeft())){el.data("scrollingHotSpotLeft").show();el.data("scrollingHotSpotRight").hide();self._trigger("scrollRightLimitReached");clearInterval(el.data("rightScrollInterval"));el.data("rightScrollInterval",null)}else{el.data("scrollingHotSpotLeft").show();el.data("scrollingHotSpotRight").show()}}else{el.data("scrollingHotSpotLeft").hide();el.data("scrollingHotSpotRight").hide()}},moveToElement:function(moveTo,elementNumber){var self=this,el=this.element,o=this.options,tempScrollableAreaWidth=0,foundStartAtElement=false;switch(moveTo){case"first":el.data("scrollXPos",0);self._trigger("movedToFirstElement");break;case"start":el.data("scrollableArea").children(o.countOnlyClass).each(function(){if((o.startAtElementId.length>0)&&(($(this).attr("id"))===o.startAtElementId)){el.data("startingPosition",tempScrollableAreaWidth);foundStartAtElement=true}tempScrollableAreaWidth=tempScrollableAreaWidth+$(this).outerWidth(true)});el.data("scrollXPos",el.data("startingPosition"));self._trigger("movedToStartElement");break;case"last":el.data("scrollXPos",el.data("scrollableAreaWidth"));self._trigger("movedToLastElement");break;case"number":if(!(isNaN(elementNumber))){el.data("scrollableArea").children(o.countOnlyClass).each(function(index){if(index===(elementNumber-1)){el.data("scrollXPos",tempScrollableAreaWidth)}tempScrollableAreaWidth=tempScrollableAreaWidth+$(this).outerWidth(true)})}self._trigger("movedToElementNumber",null,{"elementNumber":elementNumber});break;default:break}el.data("scrollWrapper").scrollLeft(el.data("scrollXPos"));self._showHideHotSpots()},addContent:function(ajaxContentURL,addWhere){var self=this,el=this.element;$.get(ajaxContentURL,function(data){if(addWhere==="first"){el.data("scrollableArea").children(":first").before(data)}else{el.data("scrollableArea").children(":last").after(data)}self.recalculateScrollableArea();self._showHideHotSpots()})},replaceContent:function(ajaxContentURL){var self=this,el=this.element;el.data("scrollableArea").load(ajaxContentURL,function(){self.recalculateScrollableArea();self.moveToElement("first");self._showHideHotSpots();el.data("startingPosition",0)})},recalculateScrollableArea:function(){var tempScrollableAreaWidth=0,foundStartAtElement=false,o=this.options,el=this.element,self=this;el.data("scrollableArea").children(o.countOnlyClass).each(function(){if((o.startAtElementId.length>0)&&(($(this).attr("id"))===o.startAtElementId)){el.data("startingPosition",tempScrollableAreaWidth);foundStartAtElement=true}tempScrollableAreaWidth=tempScrollableAreaWidth+$(this).outerWidth(true)});if(!(foundStartAtElement)){el.data("startAtElementId","")}el.data("scrollableAreaWidth",tempScrollableAreaWidth);el.data("scrollableArea").width(el.data("scrollableAreaWidth"));if(!(el.data("initialAjaxContentLoaded"))){if((o.autoScroll.length>0)&&!(o.hiddenOnStart)&&(o.ajaxContentURL.length>0)){self.startAutoScroll();el.data("initialAjaxContentLoaded",true)}}},stopAutoScroll:function(){var self=this,el=this.element;clearInterval(el.data("autoScrollInterval"));el.data("autoScrollInterval",null);self._showHideHotSpots();self._trigger("autoScrollStopped")},startAutoScroll:function(){var self=this,el=this.element,o=this.options;self._showHideHotSpots();clearInterval(el.data("autoScrollInterval"));el.data("autoScrollInterval",null);self._trigger("autoScrollStarted");el.data("autoScrollInterval",setInterval(function(){if(!(el.data("visible"))||(el.data("scrollableAreaWidth")<=(el.data("scrollWrapper").innerWidth()))){clearInterval(el.data("autoScrollInterval"));el.data("autoScrollInterval",null)}else{el.data("previousScrollLeft",el.data("scrollWrapper").scrollLeft());switch(o.autoScrollDirection){case"right":el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()+o.autoScrollStep);if(el.data("previousScrollLeft")===el.data("scrollWrapper").scrollLeft()){self._trigger("autoScrollRightLimitReached");clearInterval(el.data("autoScrollInterval"));el.data("autoScrollInterval",null);self._trigger("autoScrollIntervalStopped")}break;case"left":el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()-o.autoScrollStep);if(el.data("previousScrollLeft")===el.data("scrollWrapper").scrollLeft()){self._trigger("autoScrollLeftLimitReached");clearInterval(el.data("autoScrollInterval"));el.data("autoScrollInterval",null);self._trigger("autoScrollIntervalStopped")}break;case"backandforth":if(el.data("pingPongDirection")==="right"){el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()+(o.autoScrollStep))}else{el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()-(o.autoScrollStep))}if(el.data("previousScrollLeft")===el.data("scrollWrapper").scrollLeft()){if(el.data("pingPongDirection")==="right"){el.data("pingPongDirection","left");self._trigger("autoScrollRightLimitReached")}else{el.data("pingPongDirection","right");self._trigger("autoScrollLeftLimitReached")}}break;case"endlessloopright":if(el.data("getNextElementWidth")){if((o.startAtElementId.length>0)&&(el.data("startAtElementHasNotPassed"))){el.data("swapAt",$("#"+o.startAtElementId).outerWidth(true));el.data("startAtElementHasNotPassed",false)}else{el.data("swapAt",el.data("scrollableArea").children(":first").outerWidth(true))}el.data("getNextElementWidth",false)}el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()+o.autoScrollStep);if(el.data("swapAt")<=el.data("scrollWrapper").scrollLeft()){el.data("swappedElement",el.data("scrollableArea").children(":first").detach());el.data("scrollableArea").append(el.data("swappedElement"));el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()-el.data("swappedElement").outerWidth(true));el.data("getNextElementWidth",true)}break;case"endlessloopleft":if(el.data("getNextElementWidth")){if((o.startAtElementId.length>0)&&(el.data("startAtElementHasNotPassed"))){el.data("swapAt",$("#"+o.startAtElementId).outerWidth(true));el.data("startAtElementHasNotPassed",false)}else{el.data("swapAt",el.data("scrollableArea").children(":first").outerWidth(true))}el.data("getNextElementWidth",false)}el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()-o.autoScrollStep);if(el.data("scrollWrapper").scrollLeft()===0){el.data("swappedElement",el.data("scrollableArea").children(":last").detach());el.data("scrollableArea").prepend(el.data("swappedElement"));el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft()+el.data("swappedElement").outerWidth(true));el.data("getNextElementWidth",true)}break;default:break}}},o.autoScrollInterval))},restoreOriginalElements:function(){var self=this,el=this.element;el.data("scrollableArea").html(el.data("originalElements"));self.recalculateScrollableArea();self.moveToElement("first")},show:function(){var el=this.element;el.data("visible",true);el.show()},hide:function(){var el=this.element;el.data("visible",false);el.hide()},enable:function(){var el=this.element;el.data("enabled",true)},disable:function(){var el=this.element;clearInterval(el.data("autoScrollInterval"));clearInterval(el.data("rightScrollInterval"));clearInterval(el.data("leftScrollInterval"));clearInterval(el.data("hideHotSpotBackgroundsInterval"));el.data("enabled",false)},destroy:function(){var el=this.element;clearInterval(el.data("autoScrollInterval"));clearInterval(el.data("rightScrollInterval"));clearInterval(el.data("leftScrollInterval"));clearInterval(el.data("hideHotSpotBackgroundsInterval"));el.data("scrollingHotSpotRight").unbind("mouseover");el.data("scrollingHotSpotRight").unbind("mouseout");el.data("scrollingHotSpotRight").unbind("mousedown");el.data("scrollingHotSpotLeft").unbind("mouseover");el.data("scrollingHotSpotLeft").unbind("mouseout");el.data("scrollingHotSpotLeft").unbind("mousedown");el.data("scrollableArea").html(el.data("originalElements"));el.data("scrollableArea").removeAttr("style");el.data("scrollingHotSpotRight").removeAttr("style");el.data("scrollingHotSpotLeft").removeAttr("style");el.data("scrollWrapper").scrollLeft(0);el.data("scrollingHotSpotLeft").removeClass("scrollingHotSpotLeftVisible");el.data("scrollingHotSpotRight").removeClass("scrollingHotSpotRightVisible");el.data("scrollingHotSpotRight").hide();el.data("scrollingHotSpotLeft").hide();$.Widget.prototype.destroy.apply(this,arguments)}})})(jQuery);

Alles anzeigen

Momentan, kann man, wenn man mit der Maus über den linken oder rechten Bereich der Slideshow fährt scrollen.

synaptic

sach ma gehts noch?

du bekommst hier die infos, die du brauchst, zeigst nicht was du hast, suchst dir nen skript im netz und willst das dann angepasst haben..
und das beste: es is nen minified script!! du glaubst doch nich allen ernstes, dass sich irgendwer hinsetzt, das ding zerfriemelt, um es für dich anzupassen, obwohl keiner weiß wie des fruchtet!

und dein crosspostings kannste behalten!!
http://www.kostenlose-javascripts.de/forum/10-ich-s…-slideshow.html

Tags