我正在创建图片幻灯片，但是我遇到了一个问题。每次我点击移动幻灯片时，下一张图片都会闪烁。如何避免这种情况，我希望它能顺利滑入。
这是我的代码:
jQuery(document).ready(function($) {
$('#checkbox').change(function() {
setInterval(function() {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({
width: parseInt(slideWidth) * 3 +"px",
});
$('#slider ul').css({
width: sliderUlWidth
});
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: +slideWidth
}, 200, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: -slideWidth
}, 200, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
});@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
color: #2a2a2a;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: auto;
list-style: none;
}
#slider ul li img{
max-width:100%;
line-height: 0;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 33.33%;
height: auto;
background: #ccc;
text-align: center;
line-height: 0;
}
a.control_prev,
a.control_next {
position: absolute;
z-index: 999;
padding: 0% 0%;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.1;
cursor: pointer;
top: 0;
display: block;
width: 33.33%;
height: 100%;
}
a.control_prev:hover,
a.control_next:hover {
-webkit-transition: all 0.2s ease;
}
a.control_prev {}
a.control_next {
right: 0;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Very Simple Slider</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1> </h1>
<div id="slider">
<a href="#" class="control_next"></a>
<a href="#" class="control_prev"></a>
<ul>
<li><img src="https://orig00.deviantart.net/e3bb/f/2012/155/0/c/naruto_unleashed_by_sketch_gfx-d529cho.png"></li>
<li><img src="https://assets.rbl.ms/6450955/980x.jpg"></li>
<li><img src="http://tampascene.com/images/new-images/parks-weedonisland.jpg"></li>
</ul>
</div>
<div class="slider_option"> </div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>如果您有任何指南或指示，我不确定如何做到这一点，那就太好了如果这个问题需要改进，那么只是试图告诉我而不是仅仅否决我才 13 岁并且仍在学习也不会受到伤害提前谢谢你。
最佳答案
您可以通过更改所有 prependTo 和 appendTo 语句来淡入图像:
$('#slider ul li:last-child').prependTo('#slider ul');
成为
$('#slider ul li:last-child').hide().prependTo('#slider ul').fadeIn(500);
这是一个 jsfiddle包含更新的代码。您可以将 fadeIn(x) 中的数字更改为您喜欢的任何 x 毫秒数。
关于javascript - 停止图像幻灯片上的图像闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48964945/