Question

我使用 jquery ui 中提供的幻灯片效果通过jQuery使一些照片一张一张地滑动，基本上 每张照片都有两个滑动效果（从左到右，从下到上） 。

但是我遇到了一个问题，即每张照片每次滑动时只有一个（第一个）滑动效果，然后每张照片滑动具有第二个效果，尽管一张照片有两个滑动效果 < / p>

由于某些原因，它在StackOverflow编辑器中显示了jquery或jquery-ui错误，所以这是来自codepen的错误：

$(document).ready(function(){
  var imglst = 
    ["https://images.pexels.com/photos/4933/lake-animals-dogs-pets.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/36477/dogs-batons-play-bite.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/35638/labrador-breed-dogs-animal.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/101635/pexels-photo-101635.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"];
    
  var len = imglst.length;
  
  i=0;			
  
  setInterval(function slider() {
    if(i < len){
      $("img").replaceWith("<img src= " +imglst[i]+ " height= 250px  width= 100% >");
      $( ".sliding" ).effect( 'slide', {direction: 'up'} ,1000 ); 			
      $( ".sliding" ).effect( 'slide', {direction: 'right'} ,1000 );	
    }
    else{
      i = -1;
    }
    i = i + 1;
  }, 1000);		
});

.slideborder{
  border: 2px dotted blue;
  width: 60%;
  height: 300px;
  margin-top: 2.5%;
  margin-left: 20%;  
}

.sliding{
  margin-top: 3%;
  margin-left: 14%;
  height: 250px;
  width: 80%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
  <div class="slideborder">
   <div class="sliding"><img src="https://images.pexels.com/photos/356378/pexels-photo-356378.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" height="250px" width="100%"></div>
  </div>
</body>

jQuery：照片幻灯片的编程方式与编程不同

0 个答案: