此代码的问题出现在上一个按钮上。当用户在第一张幻灯片上按下"上一张"时，会出现一个空白滑块几秒钟，然后会出现最后一张幻灯片。你知道如何使这个幻灯片动作流畅吗？谢谢你的阅读。。。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/SliderControl.js"></script>
<link href="/Styles/Sliders.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="header">
<h1 class="text-muted">jQuery Basic Slider</h1>
</div>
<div id="slider">
<ul class="slides">
<li class="slide">
<img src="Images/Image1.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image2.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image3.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image4.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image6.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image1.jpg" alt="About Us" width="720" height="400" />
</li>
</ul>
</div>
<img id="Next" src="Images/RightArrow.png"
class="img-responsive NextButton" />
<img id="Previous" src="Images/LeftArrow.png"
class="img-responsive PreButton" />
</div>
</body>
</html>
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
#Next
{
opacity: 0.4;
filter: alpha(opacity=20);
}
#Next:hover
{
cursor: pointer;
opacity: 0.8;
filter: alpha(opacity=80);
}
#Previous
{
opacity: 0.4;
filter: alpha(opacity=20);
}
#Previous:hover
{
cursor: pointer;
opacity: 0.8;
filter: alpha(opacity=80);
}
#slider .NextButton
{
position: absolute;
top: 50%;
right: 2%;
}
#slider .PreButton
{
position: absolute;
top: 50%;
left: 2%;
}
'use strict';
$(function () {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function () {
$slideContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
$('#Next').click(function () {
$slideContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
});
$('#Previous').click(function () {
//if (currentSlide === 1) {
// $slideContainer.animate({ 'margin-left': -1 * width * ($slides.length -2)}, animationSpeed, function () {
// currentSlide = $slides.length - 1;
// });
//}
//else {
$slideContainer.animate({ 'margin-left': '+=' + width }, animationSpeed, function () {
if (--currentSlide === 0) {
currentSlide = $slides.length - 1;
$slideContainer.css('margin-left', -1 * width * ($slides.length - 2));
}
});
//}
});
$('#Next')
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
$('#Previous')
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
});
您的代码对于滑块来说有点混乱。我用一种容易理解的方式为你简化了。我们可以只使用一种方法来移动滑块，在上一个和下一个按钮中增加或减少currentSlide变量。
用下面的代码更新js代码。任何问题都可以问
'use strict';
$(function () {
/**
* Variables
*/
var width = 720,
animationSpeed = 600,
pause = 3000,
currentSlide = 0,
$slider = $('#slider'),
$slideContainer = $('.slides', $slider),
$slides = $('.slide', $slider),
interval;
/**
* Methods
*/
function changeSlider () {
// verify the boundaries of slider
if(currentSlide < 0) currentSlide = $slides.length - 1;
if(currentSlide == $slides.length) currentSlide = 0;
console.log(currentSlide);
// animation using the currentSlide variable
$slideContainer.animate({
'margin-left': -(currentSlide * width)
}, animationSpeed);
}
function startInterval() {
interval = setInterval(function () {
// increase the currentSlide in each interval dispatch
currentSlide++;
changeSlider();
}, pause);
}
function pauseInterval() {
clearInterval(interval);
}
/**
* Mouse Events
*/
$slideContainer
.on('mouseenter', pauseInterval)
.on('mouseleave', startInterval);
$('#Next').click(function () {
// next button, decrease
currentSlide--;
changeSlider();
});
$('#Previous').click(function () {
// previous button, increase
currentSlide++;
changeSlider();
});
$('#Next')
.on('mouseenter', pauseInterval)
.on('mouseleave', startInterval);
$('#Previous')
.on('mouseenter', pauseInterval)
.on('mouseleave', startInterval);
/**
* Initialize Slider
*/
changeSlider();
startInterval();
});