时间戳

首页 > 解决方案 > 如何使用 set Interval 正确循环功能？

javascript - 如何使用 set Interval 正确循环功能？

问题描述

我正在使用 javascript 和 CSS 构建背景图像幻灯片。我需要它来放大图像、缩小和切换图像。我有三个功能，但它们不能正常工作。我试图以设定的间隔循环这些函数，但它只能在第一次正常工作。为什么会这样？有更好的选择吗？

var i = 1
function zoomin(){
  $(".bg").css("transform","scale(1.2)").css("transition", "6s")
  setInterval(()=>zoomout(), 6000)
}
function zoomout(){
  $(".bg").css("transform","scale(1.15)").css("transition", "2s")
  setInterval(()=>changeImg(), 2000)
}
function changeImg(){
  $(".bg").css("transform","scale(1)").css("transition", "2s")
  i+=1
  if (i==1){
    $(".bg").css("background-image", "url(homeimg/image1.jpg)")
    return ;
  }else if (i==2){
    $(".bg").css("background-image", "url(homeimg/image2.jpg)")
    return ;
  }else if (i===3){
    $(".bg").css("background-image", "url(homeimg/image3.jpg)")
    return ;
  }else if (i==4){
    $(".bg").css("background-image", "url(homeimg/image4.jpg)")
    return ;
  }else if (i==5){
    $(".bg").css("background-image", "url(homeimg/image5.jpg)")
    return ;
  }else if (i==6){
    $(".bg").css("background-image", "url(homeimg/image6.jpg)")
    return ;
  }else if (i==7){
    $(".bg").css("background-image", "url(homeimg/image7.jpg)")
    return ; 
  }
  setInterval(()=>zoomin(), 2000)
}

标签： javascripthtmljquerycsssetinterval

解决方案

我认为你应该使用setTimeout()而不是setInterval()

推荐阅读