Question

我遇到了问题，当我按下前一个按钮时，它会转到第二张照片和第三张标题，而不是第三张照片和第三张标题。下一个按钮工作得很好，你可以自己测试

html代码：

<div class="slider">
 <a href="#" id="prev" onclick="prev();return false;" ></a>
 <a href="#" id="next" onclick="next();return false;"></a>

 <a href=""><div id="1">
    <img src="1.jpg" border="0" alt="Firstphoto"class="imageslider"/>
    <div id="caption1" ><a href="#"><h1>صدور الموسم التاني من هجوم العمالقة</h1> </a></div>
 </div></a>
 <a href=""><div id="2">
    <img src="2.jpg" border="0" alt="Secondphoto"class="imageslider"/>
    <div id="caption2"><a href="#"><h1>الغاء انمي هانتر هانتر</h1></a></div>
 </div></a>
 <a href=""><div id="3">
    <img src="3.jpg" border="0" alt="Thirdphoto"class="imageslider"/>
    <div id="caption3"><a href="#"><h1>محسن يا</h1></a></div>
 </div> </a>
</div>

CSS代码：

#prev{
position: absolute;
left: 20px;
top: 340px;
background-image: url(Arrows.png);
}
#next{
position: absolute;
right: 20px;
top: 340px;
background-image: url(Arrows.png);
background-position: -60px 0px;
}
#prev,#next{
outline: 0;
height: 60px;
width:60px;
opacity: 0;
text-indent: -9999px;
transition:ease-in all 300ms;
cursor: pointer;
z-index: 10;
}
.slider{
height: 720px;
width: 1280px;
position: relative;
overflow: hidden;
transition:ease-in all 300ms;
}
.slider:hover{
opacity: 0.85;
transition:ease-in all 300ms;
}
.slider:hover #prev{
opacity: 1;
transition:ease-in all 300ms;
}

.slider:hover #next{
opacity: 1;
transition:ease-in all 300ms;
}
.slider:hover h1{
transform:translate(-20px);
transition:ease-in all 300ms;
}
.slider:hover #bullet{
opacity: 1;
transition:ease-in all 300ms;
}
.imageslider{
width: 1280px;
height:720px;
border-radius: 0px 0px 10px 10px;
z-index: 0
}

#caption1,#caption2,#caption3{
background-image:url( bgnews.png);
width: 650px;
height:70px;
position: absolute;
top: 550px;
right:40px;
border-radius: 50px;
display: none;
}
#caption1{
z-index: 2;
}
#caption2{
z-index: 1
}
#caption3{
z-index: 0
}
.slider h1{
font-size: 25px;
color: white;
text-align: right;
padding-right: 30px;
padding-top: 7px;
transition:ease-in all 300ms;
}

jQuery滑动代码：

    sliderInt=1;
    sliderNext=2;
    $(document).ready(function(){
     $('.slider>div#'+sliderInt).stop().fadeIn(300).delay(0);
     $('#caption'+sliderInt).stop().fadeIn(1000);
     startSlider();
    });

    function startSlider(){
     count= $(".slider>div").size();
     loop=setInterval(function(){
      $(".slider>div#"+sliderInt).stop().fadeOut(0);
      $('#caption'+sliderInt).stop().fadeOut(300);
      if(sliderNext>count){
      sliderNext=1;
      }

     $(".slider>div#"+sliderNext).stop().fadeIn(300).delay(0);
     $('#caption'+sliderNext).stop().fadeIn(1000);
     sliderNext++;
     sliderInt=sliderNext-1;
    },6000);
    }
    function prev(){
        stopLoop();
        $(".slider>div#"+sliderInt).stop().fadeOut(0);
        $('#caption'+sliderInt).stop().fadeOut(300);
        sliderInt--;
        if(sliderInt<1){
            sliderInt=count;
        }   
        $(".slider>div#"+sliderInt).stop().fadeIn(300);
        $('#caption'+sliderInt).stop().fadeIn(1000);
            startSlider();
        }
    function next(){
        stopLoop();
        $(".slider>div#"+sliderInt).stop().fadeOut(0);
        $('#caption'+sliderInt).stop().fadeOut(300);
        sliderInt++;
        if(sliderInt>count){
            sliderInt=1;
        }
        $(".slider>div#"+sliderInt).stop().fadeIn(300);
        $('#caption'+sliderInt).stop().fadeIn(1000);
        startSlider();
        }
    function stopLoop(){
        window.clearInterval(loop);
    }

    $(document).ready(function(){
    $(".slider > div").hover(
        function(){
            stopLoop();
        },
        function(){
            startSlider();
        }
       );
});

Answer 1

它应该在第一次点击prev时发生。
尝试在初始时添加它

$('.slider>div').hide().first().show();

图像滑块＆＃34;之前的＆＃34;按钮不能正常工作

1 个答案: