创建滑块和幻灯片不会在向左滑动时重置位置
Creating slider and slide will not reset position upon sliding left
'use strict';
$(function(){
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider(){
interval = setInterval(function(){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
},pause);
}
function stopSlider(){
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function (){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
} );
$('#slidebttn .left').on('click', function (){
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){
currentSlide--;
if (currentSlide === 0) {
currentSlide = $slides.length;
$slideContainer.css('margin-left', 720);
}
});
} );
});
好的，这是我正在使用的代码。一切正常，直到我尝试将滑块向左滑动。它不会重复回到正确的位置。截至目前，向右滑动按钮工作正常，没有任何问题，但它拒绝向左滑动。有什么原因我可能没有适当地向左滑动吗？
让我们开始吧！
对于您的html：
通常的做法是在最后一张图像之后克隆第一张图像，在第一张图像之前克隆最后一张图像，这样您就可以创造出连续滑动的错觉。你忘了把你的最后一张图片放在你的第一张之前！ （您可以使用 https://api.jquery.com/clone/ i didn't in the fiddle）。
因此，您需要从第二张幻灯片开始，这就是我在幻灯片元素中添加 margin-left:750px 的原因。
你的CSS：一切正常。
您的 javascript：请阅读 js code.The 代码中的注释可能会更好，但我认为现在这样做会更容易。如果您有任何问题，请随时提问！
'use strict';
$(function () {
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider() {
interval = setInterval(function () {
currentSlide++;
//if this is the last image5 then go to the first image1 and current is slide 2
if (currentSlide == ($slides.length)) {
$slideContainer.css('margin-left', "-" + width + "px");
currentSlide = 2;
}
// Go to the next slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed);
}, pause);
}
function stopSlider() {
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function () {
currentSlide++;
//if this is the last image5 then go to the first image1 and current is slide 2
if (currentSlide == ($slides.length)) {
$slideContainer.css('margin-left', "-" + width + "px");
currentSlide = 2;
}
// Go to the next slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed);
});
$('#slidebttn .left').on('click', function () {
currentSlide--;
// Go to the prev slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed, function () {
// If you are at the first image5 then go to the last and current slide is slide 6 (slides-2)
if ($slideContainer.css('margin-left') == '0px') {
$slideContainer.css('margin-left', "-" + width * ($slides.length - 2) + "px")
currentSlide = $slides.length - 2;
}
});
});
});
body {
margin:0px;
}
@font-face {
font-family: speculum;
src: url(font/speculum.tff);
}
.header {
background:#c1d4ff;
margin:15px auto;
text-align:center;
height:300px;
width:relative;
}
.selection {
margin:10px auto;
position:relative;
height:relative;
width:relative;
min-width: 800px;
}
.footer {
margin:25px auto;
text-align:center;
height:150px;
width: 80%;
background: #c1d4ff;
min-width: 400px;
}
.itemlink {
top:75px;
position:relative;
right:228px;
float:left;
}
.itemlink:before {
content:"Link: "
}
.itemprice {
top:95px;
position:relative;
right:340px;
float:left;
}
.itemprice:before {
content:"Price: "
}
.iteminfo {
top:15px;
position:relative;
right:20%;
float:right;
}
.iteminfo:before {
content:"Additional Info:";
text-decoration:underline;
}
.itemcode {
top:55px;
position:relative;
right:147px;
float:left;
}
.itemcode:before {
content:"Item Code: "
}
.itemname {
top:35px;
position:relative;
left:42px;
float:left;
}
.itemname:before {
content:"Name: "
}
#parts img {
border: 3px double #c1d4ff;
margin-top:20px;
float:left;
height:100px;
width:100px;
}
#parts {
height:150px;
margin:0 auto;
width:80%;
background:#ffffff;
}
#parts ul {
list-style: none;
}
#parts ul li {
}
#parts ul li ul {
}
#parts ul li ul li {
}
#main img {
margin-top:20px;
float:left;
height:100px;
width:100px;
}
#main {
padding-bottom:10px;
height:relative;
margin:0 auto;
width:80%;
background:#ffffff;
}
#main ul {
list-style: none;
}
#main .para {
color:#5358e5;
letter-spacing: -4px;
font-family:speculum;
text-align:justify;
padding-top:10px;
margin-right:100px;
position:relative;
left:20px;
}
#main .mainhead {
color:#007e32;
text-align:left;
font-family:speculum;
text-decoration:underline;
font-weight:bold;
font-size: 30px;
}
#sidebar {
border: 1px dashed #ffffff;
z-index:100;
position:fixed;
width:100%;
text-align:center;
background:#3366FF
}
#sidebar ul {
text-align: center;
display: inline;
margin: 0;
padding: 14px 4px 17px 0px;
list-style: none;
}
#sidebar ul li {
color:#FFFFFF;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #3366FF;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li.active {
color:#FFFFFF;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #5983FF;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li.active:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li ul {
background: #3366FF;
padding: 0;
position: absolute;
top: 48px;
left: 0px;
width: 150px;
padding-right: 4px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li ul li {
background: #3366FF;
display: block;
color: #FFFFFF;
}
#sidebar ul li ul li:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li ul li.active {
background: #5983FF;
display: block;
color: #FFFFFF;
}
#sidebar ul li ul li.active:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#slider {
z-index:1;
float:none;
margin:0 auto;
position:relative;
width:720px;
height:400px;
overflow:hidden;
}
#slider img {
height:400px;
width:720px;
}
#slider .slides {
display:block;
height:400px;
width:6000px;
margin:0;
padding:0;
}
#slider .slide {
float:left;
list-style-type:none;
width:720px;
height:400px;
}
#slidebttn {
z-index:2;
transform:translateY(-400px);
width:800px;
position:relative;
margin:0 auto;
float:none;
height:400px;
}
#slidebttn .left {
position:relative;
margin:0 auto;
float:left;
height:400px;
width:40px;
}
#slidebttn .right {
background: transparent;
cursor:pointer;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
text-shadow: 4px 4px 5px #000000;
font-weight: bold;
line-height: 400px;
text-align: center;
position:relative;
margin:0 auto;
float:right;
height:400px;
width:40px;
}
#slidebttn .right:hover {
text-shadow: 1px 1px 5px #000000;
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75);
}
#slidebttn .right:active {
text-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body style="background-image:url(http://westquesttech.com/images/background.jpg)">
<div id="sidebar">
<ul>
<li class="active"><span>Home</span>
</li>
<li onclick="location.href='philosophy.html';"><span>Philosophy</span>
</li>
<li><span>Shop</span>
<ul>
<li onclick="location.href='shop.html';">Computers</li>
<li onclick="location.href='shop2.html';">Accessories</li>
<li onclick="location.href='shop3.html';">Parts</li>
</ul>
</li>
<li onclick="location.href='contact.html';"><span>Contact</span>
</li>
</ul>
</div>
</br>
</br>
<div class="header">
<img src="http://westquesttech.com/images/westquestlogo.png">
</div>
<div style="height:450px;" class="selection">
<div id="slider">
<ul class="slides" style='margin-left:-720px'>
<li class="slide">
<img src="http://westquesttech.com/images/image5.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image1.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image2.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image3.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image4.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image5.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image1.jpg" />
</li>
</ul>
</div>
<div id="slidebttn">
<button class="left">
<</button>
<button class="right">></button>
</div>
</div>
<div class="footer"></div>
</html>
'use strict';
$(function(){
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider(){
interval = setInterval(function(){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
},pause);
}
function stopSlider(){
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function (){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
} );
$('#slidebttn .left').on('click', function (){
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){
currentSlide--;
if (currentSlide === 0) {
currentSlide = $slides.length;
$slideContainer.css('margin-left', 720);
}
});
} );
});
好的，这是我正在使用的代码。一切正常，直到我尝试将滑块向左滑动。它不会重复回到正确的位置。截至目前，向右滑动按钮工作正常，没有任何问题，但它拒绝向左滑动。有什么原因我可能没有适当地向左滑动吗？
让我们开始吧！
对于您的html： 通常的做法是在最后一张图像之后克隆第一张图像，在第一张图像之前克隆最后一张图像，这样您就可以创造出连续滑动的错觉。你忘了把你的最后一张图片放在你的第一张之前！ （您可以使用 https://api.jquery.com/clone/ i didn't in the fiddle）。
因此，您需要从第二张幻灯片开始，这就是我在幻灯片元素中添加 margin-left:750px 的原因。
你的CSS：一切正常。
您的 javascript：请阅读 js code.The 代码中的注释可能会更好，但我认为现在这样做会更容易。如果您有任何问题，请随时提问！
'use strict';
$(function () {
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider() {
interval = setInterval(function () {
currentSlide++;
//if this is the last image5 then go to the first image1 and current is slide 2
if (currentSlide == ($slides.length)) {
$slideContainer.css('margin-left', "-" + width + "px");
currentSlide = 2;
}
// Go to the next slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed);
}, pause);
}
function stopSlider() {
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function () {
currentSlide++;
//if this is the last image5 then go to the first image1 and current is slide 2
if (currentSlide == ($slides.length)) {
$slideContainer.css('margin-left', "-" + width + "px");
currentSlide = 2;
}
// Go to the next slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed);
});
$('#slidebttn .left').on('click', function () {
currentSlide--;
// Go to the prev slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed, function () {
// If you are at the first image5 then go to the last and current slide is slide 6 (slides-2)
if ($slideContainer.css('margin-left') == '0px') {
$slideContainer.css('margin-left', "-" + width * ($slides.length - 2) + "px")
currentSlide = $slides.length - 2;
}
});
});
});
body {
margin:0px;
}
@font-face {
font-family: speculum;
src: url(font/speculum.tff);
}
.header {
background:#c1d4ff;
margin:15px auto;
text-align:center;
height:300px;
width:relative;
}
.selection {
margin:10px auto;
position:relative;
height:relative;
width:relative;
min-width: 800px;
}
.footer {
margin:25px auto;
text-align:center;
height:150px;
width: 80%;
background: #c1d4ff;
min-width: 400px;
}
.itemlink {
top:75px;
position:relative;
right:228px;
float:left;
}
.itemlink:before {
content:"Link: "
}
.itemprice {
top:95px;
position:relative;
right:340px;
float:left;
}
.itemprice:before {
content:"Price: "
}
.iteminfo {
top:15px;
position:relative;
right:20%;
float:right;
}
.iteminfo:before {
content:"Additional Info:";
text-decoration:underline;
}
.itemcode {
top:55px;
position:relative;
right:147px;
float:left;
}
.itemcode:before {
content:"Item Code: "
}
.itemname {
top:35px;
position:relative;
left:42px;
float:left;
}
.itemname:before {
content:"Name: "
}
#parts img {
border: 3px double #c1d4ff;
margin-top:20px;
float:left;
height:100px;
width:100px;
}
#parts {
height:150px;
margin:0 auto;
width:80%;
background:#ffffff;
}
#parts ul {
list-style: none;
}
#parts ul li {
}
#parts ul li ul {
}
#parts ul li ul li {
}
#main img {
margin-top:20px;
float:left;
height:100px;
width:100px;
}
#main {
padding-bottom:10px;
height:relative;
margin:0 auto;
width:80%;
background:#ffffff;
}
#main ul {
list-style: none;
}
#main .para {
color:#5358e5;
letter-spacing: -4px;
font-family:speculum;
text-align:justify;
padding-top:10px;
margin-right:100px;
position:relative;
left:20px;
}
#main .mainhead {
color:#007e32;
text-align:left;
font-family:speculum;
text-decoration:underline;
font-weight:bold;
font-size: 30px;
}
#sidebar {
border: 1px dashed #ffffff;
z-index:100;
position:fixed;
width:100%;
text-align:center;
background:#3366FF
}
#sidebar ul {
text-align: center;
display: inline;
margin: 0;
padding: 14px 4px 17px 0px;
list-style: none;
}
#sidebar ul li {
color:#FFFFFF;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #3366FF;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li.active {
color:#FFFFFF;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #5983FF;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li.active:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li ul {
background: #3366FF;
padding: 0;
position: absolute;
top: 48px;
left: 0px;
width: 150px;
padding-right: 4px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li ul li {
background: #3366FF;
display: block;
color: #FFFFFF;
}
#sidebar ul li ul li:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li ul li.active {
background: #5983FF;
display: block;
color: #FFFFFF;
}
#sidebar ul li ul li.active:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#slider {
z-index:1;
float:none;
margin:0 auto;
position:relative;
width:720px;
height:400px;
overflow:hidden;
}
#slider img {
height:400px;
width:720px;
}
#slider .slides {
display:block;
height:400px;
width:6000px;
margin:0;
padding:0;
}
#slider .slide {
float:left;
list-style-type:none;
width:720px;
height:400px;
}
#slidebttn {
z-index:2;
transform:translateY(-400px);
width:800px;
position:relative;
margin:0 auto;
float:none;
height:400px;
}
#slidebttn .left {
position:relative;
margin:0 auto;
float:left;
height:400px;
width:40px;
}
#slidebttn .right {
background: transparent;
cursor:pointer;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
text-shadow: 4px 4px 5px #000000;
font-weight: bold;
line-height: 400px;
text-align: center;
position:relative;
margin:0 auto;
float:right;
height:400px;
width:40px;
}
#slidebttn .right:hover {
text-shadow: 1px 1px 5px #000000;
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75);
}
#slidebttn .right:active {
text-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body style="background-image:url(http://westquesttech.com/images/background.jpg)">
<div id="sidebar">
<ul>
<li class="active"><span>Home</span>
</li>
<li onclick="location.href='philosophy.html';"><span>Philosophy</span>
</li>
<li><span>Shop</span>
<ul>
<li onclick="location.href='shop.html';">Computers</li>
<li onclick="location.href='shop2.html';">Accessories</li>
<li onclick="location.href='shop3.html';">Parts</li>
</ul>
</li>
<li onclick="location.href='contact.html';"><span>Contact</span>
</li>
</ul>
</div>
</br>
</br>
<div class="header">
<img src="http://westquesttech.com/images/westquestlogo.png">
</div>
<div style="height:450px;" class="selection">
<div id="slider">
<ul class="slides" style='margin-left:-720px'>
<li class="slide">
<img src="http://westquesttech.com/images/image5.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image1.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image2.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image3.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image4.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image5.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image1.jpg" />
</li>
</ul>
</div>
<div id="slidebttn">
<button class="left">
<</button>
<button class="right">></button>
</div>
</div>
<div class="footer"></div>
</html>