Question

我正在尝试获得横幅幻灯片。如果图像为空，则不显示。只有它可用。但幻灯片显示是显示图像1而不是滑动。

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1    /DTD/xhtml1-strict.dtd">
      <html>
      <head>
      <title>SlideShow for OHR</title>
     <style type="text/css"  media="screen">
     .slideshow {  
            height:  160px;  
            width:   400px;  
            padding: 0;  
            margin:  0; 
        } 

     .slideshow img {  
            padding: 15px;  
            border:  1px solid #ccc;  
            background-color: #eee; 
            width:  700px; 
            height: 125px; 
            top:  0; 
            left: 0;           
        }
   .slideshow a {
            display: none;
          }
   .slideshow a:first-child {
           display: block;
          }
 

   </style>
    <!-- include jQuery library -->
     <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js">     </script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle.all.js"></script> 

   <script type="text/javascript">
      $(function() {
        var numFinished = 0;
         console.log(numFinished);
        imgFinished = function() {
          numFinished++;
          if (numFinished == 5) {
            // all images are loaded or removed - setup slideshow
            $('.slideshow').cycle({
              fx: 'fade',
              speedIn: 700,
              speedOut: 1200,
              timeout: 2000 ,
              pause:  1
            });
          }
        }
        window.alert(typeof $(document).on);
        $('.slideshow img').on('error', function(e) {
          $(e.target).closest('a').remove();
          imgFinished();
          });

        $('.slideshow img').on('load', function(image) {
          imgFinished();
        });
      });
    </script>
     </head>
     <body>
 
    <div class="slideshow">        
      <a target="_blank" href="http://www.cnn.com"><img src="image1.jpg"   /> </a>
      <a target="_blank" href="http://www.cnn.com"><img src="image2.jpg"   /> </a>
      <a target="_blank" href="http://www.cnn.com"><img src="image3.jpg"   /> </a>
      <a target="_blank" href="http://www.cnn.com"><img src="image4.jpg"   /> </a>
      <a target="_blank" href="http://www.cnn.com"><img src="image5.jpg"   /> </a>

    </div> 
    </body>
    </html>
 
 
 

<!-- begin snippet: js hide: false -->

＆＃13;

我正在尝试使用jquery循环创建横幅幻灯片。我们将共有5张图片，但是，每天都无法显示所有5张图片。我们需要显示图像，如果图像不是空白，如果图像是空白，则不显示。

Answer 1

您可以使用函数检查图像的onerror事件，并设置占位符图像。

<img onerror="imageError(this)" src="image1.png />

function imageError (image) {
    if(image.src === "undefined"){
        return;
    }
    image.src = "img/placeholder_image.png";        
}

如果图像在jquery幻灯片中不可用，请删除它

1 个答案: