0
Ich mache einen Bildregler, der Thumbnails und eine vorherige und nächste Schaltfläche hat. Wenn Sie auf ein Miniaturbild klicken, das sich vom Hauptbild unterscheidet, möchte ich, dass es in das neue Bild eingeblendet wird. Gleiches gilt für die vorherigen und nächsten Schaltflächen.Fade Bilder Schieberegler klicken Zurück Weiter Button
Ich habe eine Fade-Web-Kit-Animation an Ort und Stelle, aber es funktioniert nicht. Hier ist die codepen.
$('#imgDetail li img').click(function(){
$('#unidoor').attr('src',$(this).attr('src'));
});
$('#next').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc);
});
$('#prev').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc);
});* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor {
/* position: relative; */
width: 90%;
margin: 0 auto;
display: block;
}
#prev {
position: absolute;
float: left;
bottom: 55%;
left: 5%;
cursor: pointer;
font-weight: bold;
}
#next {
position: absolute;
float: right;
bottom: 55%;
right: 5%;
cursor: pointer;
font-weight: bold;
width: auto;
}
.previous {
background-color: #fff;
opacity: 0.5;
color: black;
width: auto;
}
.next {
background-color: #fff;
opacity: 0.5;
color: black;
}
#imgDetail a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
#imgDetail ul {
margin: 0 auto;
display: block;
width: 50%;
}
/* fade animation */
#fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.thumb {
width: 25%;
height: auto;
margin: 15px 5px 0 5px;
}
#imgDetail li {
display: inline; margin-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
\t <div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="slideshow-container">
<div id="imgDetail">
<br>
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" />
<a href="#" id="prev" class="prev-next-button previous">‹</a>
<a href="#" id="next" class="prev-next-button next">›</a>
<ul>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" id="fade" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" id="fade" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" id="fade" class="thumb" /></li>
</ul>
</div>
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
Danke, das hat mir sehr geholfen. – user7311741
Ich bin froh zu sehen, dass Sie willkommen sind: D –