【问题标题】:Bug in JQuery SliderJQuery 滑块中的错误
【发布时间】:2015-10-26 21:58:04
【问题描述】:

我有 jquery 滑块。有时滑块的高度小于正常高度。 我用 Jquery 计算#slider 的高度,因为滑块是响应式的。

HTML:

<div id="slider">
        <ul id="sliderres">
            <li><img class="slires" src="slider/1.jpg" alt=""></li>
            <li><img class="slires" src="slider/2.jpg" alt=""></li>
            <li><img class="slires" src="slider/3.jpg" alt=""></li>
            <li><img class="slires" src="slider/4.jpg" alt=""></li>
        </ul>
</div>

CSS:

#slider{
    overflow:hidden;
    margin:10px auto;
    width:1024px;
    position:relative
}
#slider #sliderres li{
    font-size:20px;
    float:left;
    list-style:none;
    text-align:center
}
#slider #sliderres li img{
    width:100%
}

查询:

var sliuzun = $('#sliderres li:first-child').height(),
    time=0;
    $('#slider').height(sliuzun);
    $('#buton li:first').addClass('buton');
    $('#buton li').click(function(){
        var butind = $(this).index();
        $('#slider #sliderres li:eq('+butind+')').fadeIn('fast');
        $('#buton li').removeClass('buton');
        $(this).addClass('buton');
        return false;
    });
    $(window).resize(function(){
        sliuzun = $('#sliderres li:first-child').height()
        $('#slider').height(sliuzun);
    });
    $.Slider = function(t){
        $('#slider #sliderres li').hide();
        if(time < t - 1){
            time++;
            $('#slider #sliderres li:eq('+time+')').fadeIn('fast');
        }else{
            $('#slider #sliderres li:first').fadeIn('fast');
            time = 0;
        }
    }
    setInterval('$.Slider('+$('#slider #sliderres li').length+')',2500);

【问题讨论】:

  • less than normal height 并不是什么问题描述。这意味着什么? normal 是什么。请用正确的解释更新问题
  • 你要达到什么目标?您是否希望“低于正常高度”的图像被拉伸以匹配其他图像?如果是这样,试试这个 CSS #slider #sliderres li img{ width:100%; height:100%; }
  • 请提供一个活生生的例子,也许是您看到的问题的屏幕截图。这是一个起点:jsfiddle.net/prrstn/bpgyku1f 我无法创建它,因为我没有您的图像或它们的尺寸。

标签: jquery html css


【解决方案1】:

我解决了。我上传 16:9 的图像。 9/16 = 0,5625。宽度 * 0.5625 解决了问题。 对不起我的英语不好。我是土耳其人,我在 7. 年级

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-12
    相关资源
    最近更新 更多