自动检测最高图像的高度
Auto detect height of tallest image
我正在使用滑动横幅的代码。 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。
相关文章:
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- 如果宽度是百分比,如何设置以px为单位的图像高度
- 根据图像高度添加类
- 图像宽度和高度,无拉伸或溢出
- 自动缩放图像以匹配文本高度
- 使用asp.net FileUpload时从javascript获取图像宽度和高度
- whay可以't我使用javascript同时更改图像的高度和宽度
- Cloudinary上传小部件-样式上传预览图像(宽度和高度)
- 尝试使用window.innerHeight和Javascript设置图像高度
- 如果我将宽度调整为另一个值,找出我的图像的高度
- Javascript图像宽度和高度未定义值
- 我想根据容器中包含的图像设置容器的高度
- 高图表图像渲染器自动高度
- 灯箱类型的东西,使图像成为浏览器高度的百分比
- 如何在浏览器宽度/高度变化时动态调整图像网格的大小
- 当溢出-x 设置为隐藏时处理可变高度图像的最佳方法是什么?
- 在画布HTML5中查找上传的宽度和高度图像.(带文件读取器)
- 使用JavaScript查找图像的高度-图像加载错误
- 将悬停效果应用于响应高度图像
- 垂直居中可变高度图像,同时保持最大宽度/高度