Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Mit der Maus Button hovern und Slider Steuern

Mit der Maus Button hovern und Slider Steuern

Beim hovern der Buttons ,soll der Bildsliders an den dazugehörigen Bild sliden

Der hier verwendete Code

<script src="/js_webseite/jquery.js"></script> <style> *{ margin:0; padding:0; } .container{ margin: 0 auto; margin-top: 20px; position:relative; width: 70%; background: #1c1c1c; border: solid 10px #616161; border-radius:10px ; } nav{ width:100%; text-align:center; background:black; padding:20px; } #inbild{ width: 100%; height: 100%; } .prev,.next{ width: 10%; height:calc(100% - 20px); position:absolute; top:calc(0% + 20px); background-color: rgba(88, 88, 88,.2); color:rgba(244, 244, 244,.9); z-index: 99; transition: .45s; cursor: pointer; } .next{ right:0; } .prev span,.next span{ font-size:150px; height:150px; position:absolute; left:10px; top:calc(50% - 75px); padding:0; margin:0; } .prev:hover, .next:hover{ transition: .3s; background-color: rgba(88, 88, 89,.8); color: #ffffff; } input{ padding:5px 20px 5px 20px; font-size:20px; } </style> <nav><input type="button" data-bild="/image/little_pony_art-800x480.jpg" class="but" id="go1" value="Bild1"> <input type="button" data-bild="/image/cropped_800_480_1144211.jpg" class="but" id="go2" value="Bild2"> <input type="button" data-bild="/image/small_bird_on_a_branch-t3.jpg" class="but" id="go3" value="Bild3"> <input type="button" data-bild="/image/polygonal_red_apple-t3.jpg" class="but" id="go4" value="Bild4"> <input type="button" data-bild="/image/small_forest_waterfall_2-t3.jpg" class="but" id="go5" value="Bild5"> </nav> <div class="container"> <img id="inbild" src="/image/little_pony_art-800x480.jpg"> <label class="prev" for="i5"><span>‹</span></label> <label class="next" for="i2"><span>›</span></label> </div> <script> $('.but').hover(function(){ j=$(this).data('bild'); $('#inbild').attr('src',j) }).click(function(){ alert('Hier könnte man den Link "'+j+'" verlinken ,oder das Bild und den Button direkt verlinken'); }); v=1; $('.prev').click(function(){ r=$('#go'+v).data('bild'); $('#inbild').attr('src',r) v++; if(v>=5){ v=5; } }); $('.next').click(function(){ r=$('#go'+v).data('bild'); $('#inbild').attr('src',r) v--; if(v<=1){ v=1; } }); </script>