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>