nicht angemeldet
Hallo,
ich versuche gerade einfache Verknüpfungen zwischen verschiedenen Member Inhalten zu setzten. Es funktioniert aber nicht sauber, ich komme zwar zum richtigen Member, z.B. Member2, wenn ich aber dann über die thumb imgs ein Member vor oder zurück gehe, ist die Reihenfolge nicht richtig, springt immer 2 Schritte weiter. Wenn ich nur über die thumb imgs gehe, kann ich die Member saueber ansprechen. Was kann ich anders machen, um über einen Text-Link zu den Membern zu kommen?
Viele Grüße
<!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></title>
<link href="css/Fenster.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
var AnzahlMember=$('div.Member').length;
var MemberSliderLaenge=AnzahlMember*1000;
$('#MemberSlider').css({'width':''+MemberSliderLaenge+'px'});
});
function MemberSlider(MemberNr) {
var ZielPosition=(MemberNr-1)*1000;
$('#MemberSlider').css({'left':'-'+ZielPosition+'px'});
}
function spiegelPanelSelect(spiegelPanel) {
$('.spiegelPanel').css({'display':'none'});
$('#'+spiegelPanel).fadeIn( "1000", function() {
});
$('#MemberWrapper').delay(10).animate ({ 'opacity':0.0 }, 'slow');
}
$(document).ready(function() {
$('.rectangle').click(function(){
$('.spiegelPanel').css({'display':'none'});
$('#MemberWrapper').css({'display':'block','opacity':1.0});
});
});
</script>
<style>.rectangle { opacity: 1.0; cursor: pointer; } body { margin: 0px; padding: 0px; background-color: rgb(53, 61, 64); color: rgb(255, 255, 255); height: 100%; overflow-x: hidden; } #spiegelWrapper { position: absolute; z-index: 1000; } #navi { position: fixed; z-index: 2000; left: 0px; width: 100%; bottom: 0px; height: 180px; } #MemberWrapper { position: absolute; z-index: 100; margin-top: 20px; width: 1000px; overflow-x: hidden; display: none; } .Member { width: 1000px; float: left; padding: 0px 0px 0px 0px; }</style>
</head>
<body>
<div id="spiegelWrapper">
<div id="spiegelPanel2" class="spiegelPanel" data-pg-collapsed>
</div>
</div>
<div id="MemberWrapper">
<style>#MemberSlider { border: none; position: relative; overflow: visible; }</style>
<div id="MemberSlider">
<div id="Member1" class="Member" data-pg-collapsed>
<p class="text">1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member2"> Member2 </a> </p>
<img onClick="MemberSlider(9);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(2);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member2" class="Member" data-pg-collapsed>
<p class="text">2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member8"> Member5 </a> </p>
<img onClick="MemberSlider(1);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(3);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member3" class="Member" data-pg-collapsed>
<p class="text">3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img onClick="MemberSlider(2);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(4);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member4" class="Member" data-pg-collapsed>
<p class="text">4. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img onClick="MemberSlider(3);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(5);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member5" class="Member" data-pg-collapsed>
<p class="text">5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img onClick="MemberSlider(4);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(6);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member6" class="Member" data-pg-collapsed>
<p class="text">6. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img onClick="MemberSlider(5);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(1);" class="rectangle" src="images/Button_R.png" border="0"/>
</div
</div>
</div>
<div id="navi">
<div style="width:960px; margin:0 auto;">
<div class="buttonWrapper" onClick="MemberSlider(1);" style="cursor:pointer">
<img class="rectangle" src="01.jpg"/>
</div>
</div>
</div>
Quelltext hier
Rolf B
Gunnar Bittersmann
Matthias Scharwies