首页 > JS图片轮播出错,点右跳向最后一张图片

JS图片轮播出错,点右跳向最后一张图片

图片轮播出错,点右跳向最后一张图片,再点右 又跳向中间那张图片,求解??

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的情况,即可通过上述方法解决。


有没有人呀呀呀呀

【热门文章】
【热门文章】