Auf Thema antworten 2026

Beitrag

<blockquote data-quote="elamela" data-source="post: 1732517" data-attributes="member: 249876">Hallo, ich habe folgenden Quellcode:[HTML]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;Unbenanntes Dokument&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;&lt;!--#related {&nbsp; &nbsp; margin:10px 0;&nbsp; &nbsp; height:185px;&nbsp; &nbsp; width:1200px;}#related div {&nbsp; &nbsp; overflow:hidden;}&nbsp; &nbsp; .arrow {&nbsp; &nbsp; width:20px;&nbsp; &nbsp; height:190px;&nbsp; &nbsp; vertical-align:middle;&nbsp; &nbsp; background-color:#CCCCCC;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:0;}#arrowRight {&nbsp; &nbsp; left:790px;}.arrow + div {&nbsp; &nbsp; width:760px;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; left:30px;&nbsp; &nbsp; top:0;}.related_prods {&nbsp; &nbsp; height:190px;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; background-color:#F06;&nbsp; &nbsp; min-width: 1200px;&nbsp; &nbsp; overflow: hidden;}.related_prods div div:first-child {&nbsp; &nbsp; height:125px;&nbsp; &nbsp; width:136px;}.related_prods &gt; div {&nbsp; &nbsp; height:168px;&nbsp; &nbsp; width:136px;&nbsp; &nbsp; margin:5px 4px;&nbsp; &nbsp; padding:3px;}.productImage a {&nbsp; &nbsp; font-size:12px;&nbsp; &nbsp; padding-top:5px;&nbsp; &nbsp; line-height:13px;}.productImage {&nbsp; &nbsp; border: 1px solid #FFF;&nbsp; &nbsp; float:left;}.productImage img {&nbsp; &nbsp; width: 126px;&nbsp; &nbsp; height: 136px;}--&gt;&lt;/style&gt;&lt;script type=&quot;application/javascript&quot; src=&quot;js/scroll/jquery.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;application/javascript&quot; src=&quot;js/scroll/jquery_cycle_plugin.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;application/javascript&quot; src=&quot;js/scroll/jquery.serialScroll-min.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;application/javascript&quot; src=&quot;js/scroll/jquery.scrollTo-min.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;application/javascript&quot;&gt;jQuery.easing.easeOutQuart = function (x, t, b, c, d) {return -c * ((t=t/d-1)*t*t*t - 1) + b;}; jQuery(function( $ ){&nbsp; &nbsp; $(&#039;#related_prods&#039;).serialScroll({&nbsp; &nbsp; &nbsp; &nbsp; items: &#039;div&#039;,&nbsp; &nbsp; &nbsp; &nbsp; prev: &#039;#related a.prev&#039;,&nbsp; &nbsp; &nbsp; &nbsp; next: &#039;#related a.next&#039;,&nbsp; &nbsp; &nbsp; &nbsp; offset: -230,&nbsp; &nbsp; &nbsp; &nbsp; start: 1,&nbsp; &nbsp; &nbsp; &nbsp; duration: 1200,&nbsp; &nbsp; &nbsp; &nbsp; force: true,&nbsp; &nbsp; &nbsp; &nbsp; stop: true,&nbsp; &nbsp; &nbsp; &nbsp; lock: false,&nbsp; &nbsp; &nbsp; &nbsp; cycle: false,&nbsp; &nbsp; &nbsp; &nbsp; easing: &#039;easeOutQuart&#039;,&nbsp; &nbsp; &nbsp; &nbsp; jump: true&nbsp; &nbsp; });});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;related&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;arrow&quot; id=&quot;arrowLeft&quot; align=&quot;center&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;prev&quot;&gt;«&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;related_prods&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;productImage&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-44.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;productImage&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-47.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;productImage&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-48.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;productImage&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-42.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;productImage&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-43.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;productImage&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-suede-42.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;productImage&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-suede-44.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;arrow&quot; id=&quot;arrowRight&quot; align=&quot;center&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;next&quot;&gt;»&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]Die Anzahl der Produkte kann variieren und sollte mit den Pfeilen links und rechts per MouseOver zum nächsten Bild animiert werden. Bzw. im Moment per Klick auf den Pfeil. Leider funktioniert mein JS überhaupt nicht! Ich habe dafür folgende Demo (bzw Tutorial) verwendet:<a href="http://demos.flesler.com/jquery/serialScroll/" target="_blank">http://demos.flesler.com/jquery/serialScroll/</a>(siehe die Slideshow)Hier wurde eine Liste statt div&#039;s benutzt, ich denke aber nicht, dass es daran liegt. Oder? (die div&#039;s in eine Liste zu konvertieren ist schliesslich kein Problem)fällt jemanden ein Fehler auf? Weiss er woran es liegen kann, dass mein Skript nicht funktioniert?Danke im Voraus, und bitte nur konstruktive Beiträge!</blockquote>

[QUOTE="elamela, post: 1732517, member: 249876"] Hallo, ich habe folgenden Quellcode: [HTML] <!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>Unbenanntes Dokument</title> <style type="text/css">  </style> <script type="application/javascript" src="js/scroll/jquery.js"></script> <script type="application/javascript" src="js/scroll/jquery_cycle_plugin.js"></script> <script type="application/javascript" src="js/scroll/jquery.serialScroll-min.js"></script> <script type="application/javascript" src="js/scroll/jquery.scrollTo-min.js"></script> <script type="application/javascript"> jQuery.easing.easeOutQuart = function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; jQuery(function( $ ){ $('#related_prods').serialScroll({ items: 'div', prev: '#related a.prev', next: '#related a.next', offset: -230, start: 1, duration: 1200, force: true, stop: true, lock: false, cycle: false, easing: 'easeOutQuart', jump: true }); }); </script> </head> <body> <div id="related"> <div class="arrow" id="arrowLeft" align="center"><a href="#" class="prev">«</a></div> <div> <div class="related_prods"> <div class="productImage"> <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-44.jpg" /> </div> <div class="productImage"> <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-47.jpg" /> </div> <div class="productImage"> <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-48.jpg" /> </div> <div class="productImage"> <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-42.jpg" /> </div> <div class="productImage"> <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-43.jpg" /> </div> <div class="productImage"> <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-suede-42.jpg" /> </div> <div class="productImage"> <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-suede-44.jpg" /> </div> </div> </div> <div class="arrow" id="arrowRight" align="center"><a href="#" class="next">»</a></div> </div> </body> </html> [/HTML] Die Anzahl der Produkte kann variieren und sollte mit den Pfeilen links und rechts per MouseOver zum nächsten Bild animiert werden. Bzw. im Moment per Klick auf den Pfeil. Leider funktioniert mein JS überhaupt nicht! Ich habe dafür folgende Demo (bzw Tutorial) verwendet: [url]http://demos.flesler.com/jquery/serialScroll/[/url] (siehe die Slideshow) Hier wurde eine Liste statt div's benutzt, ich denke aber nicht, dass es daran liegt. Oder? (die div's in eine Liste zu konvertieren ist schliesslich kein Problem) fällt jemanden ein Fehler auf? Weiss er woran es liegen kann, dass mein Skript nicht funktioniert? Danke im Voraus, und bitte nur konstruktive Beiträge! [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?