简单的JQuery滑块不能正常工作

Simple JQuery slider not working properly

本文关键字：常工作 工作 不能 JQuery 简单      更新时间：2023-09-26

我是jQuery和javascript的新手，我正在制作一些动画来练习我的新技能。下面的代码是一个简单的滑动条，使用setInterval()循环4个滑动条，也可以在单击时导航。滑块工作良好，除了当第一张或最后一张幻灯片是活动的，按钮被点击。在这种情况下，滑块在返回之前显示空白幻灯片。当margin-left = -2880px时，我试图在点击时操纵ul，但没有成功。下面是我的代码:

var i = 0;
$(document).ready(function() {
  setInterval(function() {
  $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
    	i++; 
    	if( i === 4 ) {
          i = 0; 
           $("#my-slider").css("margin-left", 0); 
    	}
     }); 
    }, 5000); 
  })
  $(document).ready(function() {
$(".right").click(function() {
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000);  
}); 
$(".left").click(function() {
	$("#my-slider").animate({"margin-left": "+=720px"}, 1000); 
   }); 
 });
.slider-wrapper {
	width: 50%;
	height: 400px;
	margin: 0 auto;
	overflow: hidden; 
}
.slider-wrapper ul {
	list-style-type: none; 
	width: 3600px;
	max-width: 3600px;
	height: 400px;
	padding: 0; 
	margin: 0; 
}
.slider-wrapper li {
	float: left;
	width: 720px;
	height: 400px; 
}
#slide1 {
background: #04151F; 
}
#slide2 {
	background: #183A37; 
}
#slide3 {
	background: #EFD6AC; 
}
#slide4 {
	background: #C44900;
}
#slide5 {
	background: #04151F; 
}
.left, .right {
	font-size: 40px; 
	z-index: 1;
	position: fixed; 
	float: right; 
	margin: -15% 0 0 0.5%; 
	cursor: pointer;
	color: #FFF;
}
.right {
	margin-left: 47%;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrapper">
	<ul id="my-slider">
		<li id="slide1"></li>
		<li id="slide2"></li>
		<li id="slide3"></li>
		<li id="slide4"></li>
		<li id="slide5"></li>
	</ul>
	<p class="left">&larr;</p>
	<p class="right">&rarr;</p>
</div>

谢谢你的帮助。

我认为这是最简单的解决方案!

https://jsfiddle.net/nbLz6zzb/1/

var i = 0;
$(document).ready(function() {
  setInterval(function() {
  $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
        i++; 
        if( i === 4 ) {
          i = 0; 
           $("#my-slider").css("margin-left", 0); 
        }
     }); 
    }, 5000); 
/////////////////////////////////////
$(".right").click(function() {
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
        i++; 
        if( i === 4 ) {
          i = 1; 
           $("#my-slider").css("margin-left", 0); 
        }
     });    
}); 
$(".left").click(function() {
	if ( $("#my-slider").css("margin-left") <= '720px' && $("#my-slider").css("margin-left") >= '0px') {
		$("#my-slider").animate({"margin-left": "-2880px"}, 1000); 
	} else {
		$("#my-slider").animate({"margin-left": "+=720px"}, 1000); 
	}
   }); 
});
.slider-wrapper {
width: 50%;
height: 400px;
margin: 0 auto;
overflow: hidden; 
}
.slider-wrapper ul {
list-style-type: none; 
width: 3600px;
max-width: 3600px;
height: 400px;
padding: 0; 
margin: 0; 
}
.slider-wrapper li {
float: left;
width: 720px;
height: 400px; 
}
#slide1 {
background: #04151F; 
}
#slide2 {
background: #183A37; 
}
#slide3 {
background: #EFD6AC; 
}
#slide4 {
background: #C44900;
}
#slide5 {
background: #04151F; 
}
.left, .right {
font-size: 40px; 
z-index: 1;
position: fixed; 
float: right; 
margin: -15% 0 0 0.5%; 
cursor: pointer;
color: #FFF;
}
.right {
margin-left: 47%;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrapper">
<ul id="my-slider">
    <li id="slide1"></li>
    <li id="slide2"></li>
    <li id="slide3"></li>
    <li id="slide4"></li>
    <li id="slide5"></li>
</ul>
<p class="left">&larr;</p>
<p class="right">&rarr;</p>
</div>

按钮也需要使用循环中的代码。

$(document).ready(function() {
$(".right").click(function() {
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
    i++; 
        if( i === 4 ) {
          i = 0; 
           $("#my-slider").css("margin-left", 0); 
        }
  });   
});
相关文章：