Fatal编程技术网
  • javascript/
  • Javascript 淡出淡出图像，每隔几秒钟就会改变一次

Javascript 淡出淡出图像，每隔几秒钟就会改变一次

javascript jquery image

Javascript 淡出淡出图像，每隔几秒钟就会改变一次,javascript,jquery,image,fadein,fadeout,Javascript,Jquery,Image,Fadein,Fadeout,我已经成功地编写了js，使图像每隔几秒钟就改变一次（10个图像，每次改变都不重复）。但我希望通过添加jQuery（fadeinfadeout）使它看起来更好（过渡）。但由于我不太了解jQuery，我甚至不知道如何开始。。。这是我的密码 <script type = "text/javascript"> var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; function shuffle(o) { for(var j, x

我已经成功地编写了js，使图像每隔几秒钟就改变一次（10个图像，每次改变都不重复）。但我希望通过添加jQuery（fadeinfadeout）使它看起来更好（过渡）。但由于我不太了解jQuery，我甚至不知道如何开始。。。这是我的密码

<script type = "text/javascript">
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    function shuffle(o) {
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };
      var random = shuffle(numbers);

      var images = [], x = -1;
              images[0] = "logaban/image1.png";
              images[1] = "logaban/image2.png";
      images[2] = "logaban/image3.png";
      images[3] = "logaban/image4.png";
      images[4] = "logaban/image5.png";
      images[5] = "logaban/image6.png";
      images[6] = "logaban/image7.png";
      images[7] = "logaban/image8.png";
      images[8] = "logaban/image9.png";
      images[9] = "logaban/image10.png";

      var links = [], x = -1;
      links[0] = "link1";
      links[1] = "link2";
      links[2] = "link3";
      links[3] = "link4";
      links[4] = "link5";
      links[5] = "link6";
      links[6] = "link7";
      links[7] = "link8";
      links[8] = "link9";
      links[9] = "link10";
    function zmiana() {
            shuffle(numbers);
          document.getElementById("img1").src = images[numbers[0]];
          document.getElementById("bannerLink1").href = links[numbers[0]]; 
          document.getElementById("img2").src = images[numbers[1]];
          document.getElementById("bannerLink2").href = links[numbers[1]];
          document.getElementById("img3").src = images[numbers[2]];
          document.getElementById("bannerLink3").href = links[numbers[2]];
          document.getElementById("img4").src = images[numbers[3]];
          document.getElementById("bannerLink4").href = links[numbers[3]];
          document.getElementById("img5").src = images[numbers[4]];
          document.getElementById("bannerLink5").href = links[numbers[4]];
          document.getElementById("img6").src = images[numbers[5]];
          document.getElementById("bannerLink6").href = links[numbers[5]];
          document.getElementById("img7").src = images[numbers[6]];
          document.getElementById("bannerLink7").href = links[numbers[6]];
          document.getElementById("img8").src = images[numbers[7]];
          document.getElementById("bannerLink8").href = links[numbers[7]];
          document.getElementById("img9").src = images[numbers[8]];
          document.getElementById("bannerLink9").href = links[numbers[8]];
          document.getElementById("img10").src = images[numbers[9]];
          document.getElementById("bannerLink10").href = links[numbers[9]];
      }
    function logotypy() {

       setInterval(zmiana, 3000);
       zmiana();
    }
  </script>
 <img src="logaban/image1.png" onload = "logotypy()" style="display: none">

   <a id="bannerLink1" href="">
   <img id="img1" class="image" src="" style="max-width:100%;"></a><br>  
  <a id="bannerLink2" href="">
   <img id="img2" class="image" src="" style="max-width:100%;"></a><br>  
  <a id="bannerLink3" href="">
   <img id="img3" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink4" href="">
   <img id="img4" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink5" href="">
   <img id="img5" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink6" href="">
   <img id="img6" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink7" href="">
   <img id="img7" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink8" href="">
   <img id="img8" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink8" href="">
   <img id="img9" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink10" href="">
   <img id="img10" class="image" src="" style="max-width:100%;"></a><br>


变量数=[0,1,2,3,4,5,6,7,8,9]；
函数洗牌（o）{
对于（var j，x，i=o.length；i；j=parseInt（Math.random（）*i），x=o[--i]，o[i]=o[j]，o[j]=x）；
返回o；
};
var random=随机（数字）；
var图像=[]，x=-1；
图像[0]=“logaban/image1.png”；
图像[1]=“logaban/image2.png”；
图像[2]=“logaban/image3.png”；
图像[3]=“logaban/image4.png”；
图像[4]=“logaban/image5.png”；
图像[5]=“logaban/image6.png”；
图像[6]=“logaban/image7.png”；
图像[7]=“logaban/image8.png”；
图像[8]=“logaban/image9.png”；
图像[9]=“logaban/image10.png”；
var-links=[]，x=-1；
链接[0]=“链接1”；
链接[1]=“链接2”；
链接[2]=“链接3”；
链接[3]=“链接4”；
链接[4]=“链接5”；
链接[5]=“链接6”；
链接[6]=“链接7”；
链接[7]=“链接8”；
链接[8]=“链接9”；
链接[9]=“链接10”；
函数zmiana（）{
洗牌（数字）；
document.getElementById（“img1”）.src=images[number[0]；
document.getElementById（“bannerLink1”）.href=links[number[0]；
document.getElementById（“img2”）.src=images[number[1]；
document.getElementById（“bannerLink2”）.href=links[number[1]；
document.getElementById（“img3”）.src=images[number[2]；
document.getElementById（“bannerLink3”）.href=links[number[2]；
document.getElementById（“img4”）.src=images[numbers[3]；
document.getElementById（“bannerLink4”）.href=links[number[3]；
document.getElementById（“img5”）.src=images[numbers[4]；
document.getElementById（“bannerLink5”）.href=links[number[4]；
document.getElementById（“img6”）.src=images[number[5]；
document.getElementById（“bannerLink6”）.href=links[number[5]；
document.getElementById（“img7”）.src=images[numbers[6]；
document.getElementById（“bannerLink7”）.href=links[number[6]；
document.getElementById（“img8”）.src=images[numbers[7]；
document.getElementById（“bannerLink8”）.href=links[number[7]；
document.getElementById（“img9”）.src=images[numbers[8]；
document.getElementById（“bannerLink9”）.href=links[number[8]；
document.getElementById（“img10”）.src=images[numbers[9]；
document.getElementById（“bannerLink10”）.href=links[number[9]；
}
函数logotypy（）{
设定间隔（zmiana，3000）；
zmiana（）；
}
这里是我添加的第一个attepmt，但我真的不知道我应该如何使用这些jQuery东西，特别是在这个上下文中

 <script src="jquery-1.9.0.js" type="text/javascript"></script>
  <script>
    $("#image").attr("src").change().fadein();
  </script>


$（“#image”）.attr（“src”）.change（）.fadein（）；
我真的不知道你想用你所有的代码做什么。下面是一个简单的jQuery幻灯片，它使用两个图像对象相互叠加。它一个淡出，另一个淡入。它假设图像已经预加载，并且您有一个带有适当CSS的容器div来格式化它（您可以在JSFIDLE中看到这些细节）

工作演示：

在这个答案中可以看到预加载图像时的通知：

这一行
$（“#image”）.attr（“src”）.change（）.fadein（）毫无意义
.attr（“src”）
返回一个没有
.change（）
方法的字符串，该方法只会生成一个错误。通常，如果要淡出一个图像而淡入另一个图像，可以使用两个图像元素。将新图像的不透明度设置为零，在其上设置一个新的
.src
，使两个图像相互重叠，淡出旧图像，淡入新图像。

function runSlideshow(container, urls, fadeTime, delayTime) {
    // all images are preload now
    // start the slideshow
    var imgs = $(container).append(new Image()).append(new Image()).find("img");
    var curImage = 0;
    var urlIndex = -1;
    // no wait time for the first transition
    var waitTime = 0;

    function next() {
        // set src on the next image
        // fade out the current image
        // fade in the new image
        var nextImage = (curImage + 1) % 2;
        urlIndex = (urlIndex + 1) % urls.length;

        imgs.eq(curImage).delay(waitTime).fadeOut(fadeTime);
        imgs.eq(nextImage).attr("src", urls[urlIndex]).delay(waitTime).fadeIn(fadeTime, next);
        curImage = nextImage;
        // set normal wait time for subsequent images
        waitTime = delayTime;
    }
    next();
}