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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.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="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg" class="but" id="go1" value="Bild1"> <input type="button" data-bild="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg" class="but" id="go2" value="Bild2"> <input type="button" data-bild="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg" class="but" id="go3" value="Bild3"> <input type="button" data-bild="http://wallpaperswide.com/download/big_hero_6_baymax-wallpaper-1152x720.jpg" class="but" id="go4" value="Bild4"> <input type="button" data-bild="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg" class="but" id="go5" value="Bild5"> </nav> <div class="container"> <img id="inbild" src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg"> <label class="prev" for="i5"><span>&#x2039;</span></label> <label class="next" for="i2"><span>&#x203a;</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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!