极客观点
项目管理
HarmonyOS
点击序号，从4跳到3和2，图片显示空白，其他显示正常
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;}
.all
{
/*text-align:center;*/}
.main
{
width:200px;
height:200px;
/*margin:30px auto;*/
overflow:hidden;
position:relative;
}
.main ul
{
width:800px;
overflow:hidden;
position:absolute;
}
.main ul li
{
list-style:none;
float:left;
}
.main ul li img
{
width:200px;
height:200px;
}
.buttons
{
margin:20px;}
.buttons span
{
color:#fff;
background-color:#000;
padding:5px;}
.buttons span:hover
{
cursor:pointer;}
.buttons span.active
{
background-color:blue;}
</style>
</head>
<body>
<div class="all">
<div class="main">
<ul class="slide-group">
<li class="slide slide-1 currentPic">
<img src="images/1.jpg" alt="No two are the same" />
</li>
<li class="slide slide-2">
<img src="images/2.jpg" alt="Monsieur Mints" />
</li>
<li class="slide slide-3">
<img src="images/3.jpg" alt="The Flower Series" />
</li>
<li class="slide slide-4">
<img src="images/4.jpg" alt="Salt o' The Sea" />
</li>
</ul>
</div>
<div class="buttons">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<script>
$(function(){
var $btnIndex,$currentIndex=0;
$(".buttons span").click(function(){
$(this).addClass("active")
.siblings().removeClass("active");
$btnIndex = $(this).index();
if($btnIndex>$currentIndex)
{
$(".slide-group").animate({left:-$btnIndex*($(".slide img").width())+'px'});
$currentIndex = $btnIndex;
}
else if($btnIndex<$currentIndex)
{
$(".slide-group").animate({left:$btnIndex*($(".slide img").width())+'px'});
$currentIndex = $btnIndex;
}
});
});
</script>
</body>
</html>
这样的问题我曾经也遇到过，我的建议是从代码的第一步，一步一步往后走流程，你肯定会发现问题所在！这样的问题很繁琐但是需要自己去解决。