basti1012.bplaced.net

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

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>