Mit_der_Maus_Button_hovern_und_Slider_Steuern

Beim hovern der Buttons ,soll der Bildsliders an den dazugehörigen Bild sliden
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

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>