自动检测最高图像的高度

Auto detect height of tallest image

本文关键字:高度 图像 高图像 自动检测      更新时间:2023-09-26

我正在使用滑动横幅的代码。 https://jsfiddle.net/r4ht890f/

问题1)我不想通过 css 为本节设置高度,而是让 javascript 代码实际控制该部分的高度。 有没有一种简单的方法可以添加到 javascript 代码中,它检测最高图像的高度并以某种方式对其进行设置,以便图像显示在页面上。 现在,由于未检测到高度,因此没有显示任何内容。

问题2) 我想对这个脚本做的唯一另一件事是让最后一个自然地回到第一个以形成循环,而不是返回所有旧脚本以返回到 1。

#images_holder {
    float: left;
    width: 100%; 
}
#moving_part {
    width: 100%;
}
#moving_part > div {
    position: relative;
    width: 100%; 
    height: auto;
    float:    left;
}
#moving_part > div img{
    float: left; 
    width:  100%; 
    height: auto;
}
#prev, #next {
    position: absolute;
    cursor:   pointer;
    top:      47%;  
  display:  none; /* hide initially */
    -webkit-user-select: none;
            user-select: none;
}
#next{
    right: 0px;
}
#description{
    color:      #fff;
    background: rgba(0,0,0,0.4);
    text-align: center;
    position:   absolute;
    padding:    15px;
    right:      0;
    left:       0;
  display:    none; /* hide initially */
}
/* EXTRA: navigation */
#navigation{
  display:    none; /* hide initially */
  position:absolute;
    width:100%;
    bottom:0;
  text-align:center
}
#navigation span{ /* created by jQuery*/
    display:inline-block;
  background: rgba(255,255,255,0.6);
  cursor:pointer;
  padding:4px 10px;
}

这是JavaScript

jQuery(function( $ ){
    var efx  = "slide", // "slide" || "fade"
            animationTime = 600,
            pauseTime = 4000,
      $gal = $("#images_holder"),
        $mov = $("#moving_part"),
        $sli = $mov.find("> div"),
        $btn = $("#prev, #next"),
            $dsc = $("#description"),
            $nav = $("#navigation"), // Our buttons parent
            $navBtns, // Later, our SPAN buttons
            spans = "",
            w = $gal.width(),
            n = $sli.length,
            c = 0,  // Counter // Start index
            itv;    // Interval

for(var i=0; i<n; i++) {     // `n` is the number of slides!
    spans += "<span>"+ (i+1) +"</span>";
}
// Finally append our generated buttons:
$nav.append( spans );
// Retrieve the created buttons and do something on click
$nav.find("span").on("click", function(){
   c = $(this).index(); // Set our counter to the clicked SPAN index
   anim();              // Animate. That easy.
});

    // SETUP (fade or slide?)
    $mov.width(w*n);
    if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);
    function populateDescription() {
        $dsc.text( $sli.eq(c).find("img").attr("alt") );
    }
    function anim() {
        c = c<0 ? n-1 : c%n; // loop-back if exceedds
        populateDescription();
        if (efx==="fade") {
            $sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
        }else if(efx==="slide") {
            $mov.stop().animate({left: -c*w});
        }
    }
    function auto() {
        $btn.add($dsc).add($nav).stop().fadeOut(); // Hide UI
        itv = setInterval(function(){
           ++c;
           anim();
        }, pauseTime);
    }
    function pause() {
    $btn.add($dsc).add($nav).stop().fadeIn(); // Show UI
        return clearInterval( itv );
    }
  $gal.hover(pause, auto);
    $btn.on("click", function(){
        c = this.id==="next" ? ++c : --c;
        anim();
    });

    populateDescription();
    auto();
});
<div id="images_holder">
          <div id="moving_part">
              <div>
                  <a href="You-Belong">
<img src="images/For-Smithfield-Slider-600x232.png" 
srcset="
images/For-Smithfield-Slider-1000x387.png 1000w, 
images/For-Smithfield-Slider-1920x743.png 1920w,
images/For-Smithfield-Slider-2880x1114.png 2880w
" alt=""/>
</a>
              </div>
              <div>
                  <a href="You-Belong">
<img alt="" src="images/You-Belong-Here-Slider1.png"></a>
              </div>
              <div>
                  <img alt="" src="images/Vision-Statement-01.png">
              </div>
          </div>
          <div id="prev">PREV</div>
          <div id="next">NEXT</div>
          <div id="description">Test</div>
          <div id="navigation"></div>
      </div>

这是为了我正在从事的一个活跃的项目和学习。 我以前从未做过这样的事情。 任何帮助都会很棒!

也许这对问题 1 有帮助:等于缩略图的高度

向图像添加一些自定义类,该代码应该可以将 .thumbnail 更改为 .yourcustomclass。