0

我正在我正在构建的网站上实现一个 jQuery Fade Slider，尽管定义了高度给我带来了一些问题。

我使用以百分比定义的列作为它们各自的宽度，col-25 = 25% 的宽度。我的图像放置在一个名为 .img-holder 的类中，其中宽度设置为 100%。截至目前，当使用淡入淡出滑块时，图像高度在我的屏幕上的宽度和高度都很好，但是当缩小到较小的屏幕时，定义的高度显然会变得有问题，因为我在图像和段落文本上有左/右箭头导航以下。我不想通过我的 css 中的 @media 查询为每个屏幕变化使用不同的定义高度。有没有办法使用滑块而不必为其定义高度？

我的 CSS 目前看起来像这样：

.img-holder { background: #EEE; overflow:auto; position:relative; width:100%}
.col { float:left }
.col .img-holder { width:100%; height:auto; margin-bottom:14px; margin-top:5px }

.fades-demo { position:relative; width:100%; height: 100% !important; margin-left:auto; margin-right:auto; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

我的标记：

<div class="col col-50">
<div class="img-holder">
    <div class="mgtb fades-demo hide" id="fades1">

        <div>
        <img src="/001.jpg" width="" height="" alt="" class="" />
        </div>

        <div>
        <img src="/002.jpg" width="" height="" alt="" class="" />
        </div>

        <div>
        <img src="/003.jpg" width="" height="" alt="" class="" />
        </div>

    </div>

</div>
</div>

JS

<script>
//scripts
$(document).ready(function() {


//initUI
initUI()

//init slider 1
var defaults = {
    speed: 800
    ,timer: 4000
    ,autoSlider: false
    ,hasNav: true
    ,pauseOnHover: true
    ,navLeftTxt: ''
    ,navRightTxt: ''
    ,zIndex:20
}
,as = $('#fades1').fadeSlider(defaults)
,count = 2

//destroy
$('#o-btn-des').click(function() {
    as.destroy()
})

//resize wrapper
$('#o-btn-cs').click(function() {
    $('#fades1').css({
        position:'fixed'
        ,left:0
        ,top:0
        ,width:'100%'
        ,height:'100%'
        ,'z-index': 300
    })
    as.defs.speed = 1000
})

//resize wrapper
$('#o-btn-ns').click(function() {
    var t = '<div class="fades-demo mgtb" id="fades' + ++count +'">' +
    ($('#fades1 .fade-slides').length?$('#fades1 .fade-slides').html():$('#fades1').html()) +
    '</div>'
    $('#wrapper').append(t)
    $('#fades' + count).fadeSlider(defaults)
})
})

</script>
4

2 回答 2

0

我会认为：

.fades-demo { height: auto !important; }
.fades-demo img { max-width: 100%; width: 100%; height: auto; }

会工作得很好。当然，这假设您使用的滑块不会通过浮动/定位从正常流程中删除所有图像，这会导致容器自身塌陷。如果图像的纵横比是恒定的并且您事先知道，则有许多解决方案。或者在容器中隐藏可见的图像：隐藏只是为了保持正确的纵横比是另一种解决方案。在不知道您使用的是哪个推子/滑块的情况下，很难进一步帮助您。如果上述方法不起作用，请尝试设置 jsFiddle。

于 2013-08-16T22:00:37.957 回答
0

尽管答案似乎为时已晚。面临这个问题的其他人可能想尝试一下我创建的 jquery-fade-slider 插件。

可以在http://jqueryfadeslider.com访问文档，并且可以在http://jqueryfadeslider.com/demo看到演示

于 2015-10-12T01:21:33.723 回答