0
我正在制作一个图像滑块，它具有缩略图和上一个和下一个按钮。当您点击与主图像不同的缩略图时，我希望它淡入新图像。上一个和下一个按钮也一样。淡入淡出图像滑块点击prev next button
我有一个淡入淡出的web-kit动画，但它不起作用。这是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>
谢谢，这帮助了很多。 – user7311741
我很高兴看到，欢迎您：D –