Question

我的HTML中有三个图像，并试图使用jQuery创建一个滑块。下面是我从HTML到jQuery的代码。

<html>
    <head>
        <title>Awesome Website</title>
        <link rel="stylesheet" href="main.css">
        <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
    </head>  
    <body>      
        <div class="wrapper">
            <section id="slider">
                <img id="1" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" alt="Important Images">
                <img id="2" src="http://www.planwallpaper.com/static/images/6935544-blue-backgrounds-hd.jpg" alt="PIGS">
                <img id="3" src="http://watermarked.cutcaster.com/cutcaster-photo-100482846-Blue-Technology-Background.jpg" alt="ROADS will be here">
            </section>
                <a href="" class="left">Previous</a>
                <a href="" class="right">Next</a>
        </div>                
        <script src="js/jquery-2.2.4.min.js"></script>
        <script src="js/slider.js"></script>  
    </body>
</html>

CSS：

    .wrapper{
        width: 100%;
       margin:0 auto
    }
    html,body{
      height: 100%;
      width: 100%;
    }
    img{
      position: absolute;
      width:100%;
      height: 100%;
      display:hidden;
    }
    #slider{
      position:relative;
      width: 100%;
      height: 600px;
      display:hidden; 
    }
    #slider img{
      display:none;
    }
   .wrapper a{
      padding: 5px 10px;
      background-color:blue; 
   }
   a.left{
     top:50%;
     bottom:50%;
     float:left;
   }
   a.right{
    float:right;
   }

根据我的jQuery，我打算每隔3秒滑动图像，但不幸的是它只显示第一张图像。 3秒后消失，容器变空。意味着它消失了，没有更多的东西消失。

sliderInt = 1;
sliderNext = 2;
$(document).ready(function(){
   $("#slider > img#1").fadeIn(300) ;
   startSlider();           
});
function startSlider(){
    loop = setInterval(function(){      
    if(sliderNext > count){
       sliderNext = 1;
       sliderInt = 1;
    }   
    $("#slider > img").fadeOut(300); 
    $("#slider > img#1" + sliderNext).fadeIn(300);      
    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;       
    },3000) 
}

如何让图像不断淡入淡出？

Answer 1

请找到正确的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Awesome Website</title>
    <style>
        .wrapper
        {
            width: 100%;
            margin: 0 auto;
        }
        html, body
        {
            height: 100%;
            width: 100%;
        }
        img
        {
            position: absolute;
            width: 100%;
            height: 100%;
            display: hidden;
        }
        #slider
        {
            position: relative;
            width: 100%;
            height: 600px;
            display: hidden;
        }
        #slider img
        {
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <section id="slider">
            <img id="1" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png"
                alt="Important Images">
            <img id="2" src="http://www.planwallpaper.com/static/images/6935544-blue-backgrounds-hd.jpg"
                alt="PIGS">
            <img id="3" src="http://watermarked.cutcaster.com/cutcaster-photo-100482846-Blue-Technology-Background.jpg"
                alt="ROADS will be here">
        </section>
        <a href="" class="left">Previous</a> <a href="" class="right">Next</a>
    </div>
    <script>
        var sliderInt = 1;
        var sliderNext = 2;
        var count = $("#slider > img").length;
        $(document).ready(function () {
            $("#slider > img#1").fadeIn(300);
            startSlider();
        });
        function startSlider() {
            loop = setInterval(function () {
                if (sliderNext > count) {
                    sliderNext = 1;
                    sliderInt = 1;
                }
                $("#slider > img").fadeOut(300);
                $("#slider > img#" + sliderNext).fadeIn(300);
                sliderInt = sliderNext;
                sliderNext = sliderNext + 1;
            }, 3000)
        }
    </script>
</body>
</html>

如果有任何帮助，请对此答案发表评论。如果你得到你想要的，请将这个答案标记为正确。

Answer 2

jquery代码应替换为以下内容：

  sliderInt = 1;
  sliderNext = 2;
  $(document).ready(function(){
    $("#slider > img#1").fadeIn(30);
      startSlider();  
  });
  function startSlider(){
    count = $("#slider > img").size();
    loop = setInterval(function(){      
    if(sliderNext > count){
        sliderNext = 1;
        sliderInt = 1;
    }   

    $("#slider > img").fadeOut(300); 
    $("#slider > img#" + sliderNext).fadeIn(300);       
    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;       
  }, 3000) 
}

在if语句的}之后的第二行，img的ID不能为1（img＃1），而只是img＃。

如何使用带有fadeIn和fadeOut的jquery制作图像滑块

2 个答案: