我正在我正在构建的网站上实现一个 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>