极客观点
项目管理
HarmonyOS
图片轮播出错，点右跳向最后一张图片，再点右 又跳向中间那张图片，求解？？
html代码
<script type="text/javascript">
$(function(){
showCur_D(0);
})
</script>
</head>
<body>
{dede:include filename="head.htm"/}
<!--banner-->
<div class="manlang_banner">
<div class="manlang_banner_scroll">
{dede:myppt typeid='1' row='4'}
<div>
<a href="[field:url/]"><img src="[field:pic/]" alt="[field:title function='html2text(@me)'/]"></a>
</div>
{/dede:myppt}
</div>
<span class="manlang_banner_scroll_left"><img src="/groups/Public/Images/Manlang/left.png" alt="深圳网络推广公司banner点击向左切换"></span>
<span class="manlang_banner_scroll_right"><img src="/groups/Public/Images/Manlang/right.png" alt="深圳网站SEO优化公司banner点击向右切换"></span>
</div>
<script type="text/javascript">
$(function(){
$(".manlang_banner").hover(function(){
$(".manlang_banner span").show("200");
},function(){
$(".manlang_banner span").hide("100");
})
})
</script>JS 代码
function showCur_D(i){
$(".top_new_daohang2").find("p").removeClass("acurhover");
$(".top_new_daohang2").find("p").eq(i).addClass("acurhover");
}
$(function(){
//导航栏
$(".top_new_daohang2 li").hover(function(){
$(this).find("span").slideDown(200);
$(this).find("p").children("a").addClass("acurhover");
},function(){
$(this).find("span").slideUp(200);
if($(this).find("p").children("a").hasClass=="acurhover"){
$(this).find("p").children("a").addClass("acurhover");
}
else
{
$(this).find("p").children("a").removeClass("acurhover");}
})
//底部二级导航的高度
$(".manlang_footer_2_nav li").css("height",$(".manlang_footer_2_nav").find("li").height()+"px");
$(".manlang_PC_indexSER li").css("height",$(".PC_indexSER1").width()*228/355+"px")
//整合策略
$(".manlang_PC_zh").css("height",$(".manlang_PC_zh").width()*331/1920+"px")
$(".manlang_PC_zh_img_img1").animate({"marginLeft":$(".main").width()*0.70333333333/2+"px"},300);
/*$(window).scroll(function(){
if(400<(document.documentElement.scrollTop||document.body.scrollTop)){
$(".manlang_PC_zh_img_img1").animate({"marginLeft":$(".main").width()*0.70333333333/2+"px"},300);
}
else{
$(".manlang_PC_zh_img_img1").animate({"marginLeft":0+"px"},300);
}
});*/
//曼朗品牌
$(".manlang_PC_cus_brand_1").css("height",($(".manlang_PC_cus_brand_1 li").width()*66/168+5)+"px");
//曼朗品牌滚动
var numP=0;
var bIndex=0;
var BrandTime=null;
if($(".manlang_PC_cus_brand_1 li").length%6=="0"){
numP=$(".manlang_PC_cus_brand_1 li").length/6;
}
else{
numP=Math.floor($(".manlang_PC_cus_brand_1 li").length/6)+1;
}
for(var i=0;i<numP;i++){
if(i=="0"){
$("<p class='cur'></p>").appendTo(".manlang_PC_cus_brand_2");
}
else{
$("<p></p>").appendTo(".manlang_PC_cus_brand_2");
}
}
$(".manlang_PC_cus_brand_2 p").click(function(){
bIndex=$(this).index();
$(".manlang_PC_cus_brand_2 p").removeClass("cur");
$(".manlang_PC_cus_brand_2 p").eq(bIndex).addClass("cur");
$(".manlang_PC_cus_brand_1 ul").animate({"marginTop":-(bIndex)*($(".manlang_PC_cus_brand_1 li").width()*66/168+6)+"px"},400);
})
BrandTime=window.setInterval(function(){
bIndex++;
if(bIndex<numP){
bIndex=bIndex;
}
else{
bIndex=0;
}
$(".manlang_PC_cus_brand_2 p").removeClass("cur");
$(".manlang_PC_cus_brand_2 p").eq(bIndex).addClass("cur");
$(".manlang_PC_cus_brand_1 ul").animate({"marginTop":-bIndex*($(".manlang_PC_cus_brand_1 li").width()*66/168+6)+"px"},400);
},3000)
$(".manlang_PC_cus_brand_1").hover(function(){
clearInterval(BrandTime);
},function(){
BrandTime=window.setInterval(function(){
bIndex++;
if(bIndex<numP){
bIndex=bIndex;
}
else{
bIndex=0;
}
$(".manlang_PC_cus_brand_2 p").removeClass("cur");
$(".manlang_PC_cus_brand_2 p").eq(bIndex).addClass("cur");
$(".manlang_PC_cus_brand_1 ul").animate({"marginTop":-bIndex*($(".manlang_PC_cus_brand_1 li").width()*66/168+6)+"px"},400);
},3000)
})
})
这代码是基于CMS写的，静态网站无法直接编译，也就没能调试。
不过有一些意见你可以拿来参考，就是JS写循环的时候极容易产生点击后点击的图片被默认为第一个图片，然后从第二张图开始循环，这时候可以通过变量的重定义来解决。
可尝试通过console.log()打印来调试观察文件切换状态。如点击4后出现顺序为4,2,3,4,1的情况，即可通过上述方法解决。