[英]Jquery slider previous button
此代碼的問題在上一個按鈕上。 當用戶在第一張幻燈片上按上一頁時,會有一個空白滑塊幾秒鍾,然后出現最后一張幻燈片。 您是否知道如何使此滑動動作流暢,感謝您的閱讀...
<!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();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.