jquery做图片轮播时,图片用的1920*628尺寸的,怎么自适应小屏幕电脑

bitter_lime
  • 187

1.目前写的图片轮播是这样的,图片1-5,图片1 display:inline,其余四张display:none
之后图片2:display:inline, 其余四张display:none,隐藏的四张其实就不占位置了,这样图片2就跑到最上面了,并给图片父元素设置了overflow:hidden,
2.现在有个问题:我为了让展板自适应大屏小屏幕,设置的img父元素width:100%,height:100%,图片大小都是1920*628px,这样在小屏幕时会按比例缩放

1和2的效果其实是会冲突的,若是我设置了2中提到的父元素宽高都是100%,那么1中的overflow:hidden就会失效,若是把2中提到的父元素高设为定值,overflow:hidden会有效果,但是不会在小屏幕按比例缩放,so..有解决方案吗?

html:

<section class="banner">
<div class = "wrapper">
    <div id="slider">
        <img id="1" src="images/banner/1.jpg" />
        <img id="2" src="images/banner1.jpg" /> 
        <img id="3" src="images/banner/3.jpg" />   
    </div>

    <a href="#" class="left" ><i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
    </a>
    <a href="#" class="right" ><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
    </a>      
</div>
</section> 

css:


/*image slider部分*/
.banner{

width:100%;
z-index: -10;
}

.wrapper{
width: 100%;
height: 100%;
margin: 0 auto;

}
.banner .wrapper #slider{
width: 100%;
height: 100%;
/*height: 628px;*/
overflow: hidden;  
}
.banner .wrapper #slider>img{ 
width: 100%;
height: 100%;   
display: none;

}
.wrapper a{
font-size: 30px;
color:rgb(138,134,133);
/*background-color: rgba(179,179,179,0.5);*/
position: absolute;
bottom:220px;
display: none;
}
.wrapper a:hover{

color: #FE4C6E;
}
.wrapper a.left{
float: left;
position: relative;
left: 40px;
}
.wrapper a.right{
float: right;
position: relative;
right: 40px;

}

图片轮播函数:

$(document).ready(function(){
$(".banner").hover(function(){
    // alert();
    $(".banner a").css({"display":"block"});
},function(){
    $(".banner a").css({"display":"none"});
})
})

sliderInt = 1;
sliderNext = 2;
$(document).ready(function(){
$('#slider>img#1').fadeIn(100);
// $('#slider>img#1').show();
startSlider();
});

function startSlider(){
count = $("#slider>img").length;
// alert(count);
loop = setInterval(function(){

    if(sliderNext > count){
        sliderNext = 1;
        sliderInt = 1;
    }
    $("#slider>img").fadeOut(100);
    $("#slider>img#"+sliderNext).fadeIn(100);

    sliderInt= sliderNext;
    sliderNext = sliderNext+1;

},5000);
}

function prev(){
newSlider = sliderInt -1;
showSlider(newSlider);

}
function next(){
newSlider = sliderInt + 1;
showSlider(newSlider);
}

function stoploop(){
window.clearInterval(loop);
}
function showSlider(id){

stoploop();

if(id>count){
    id = 1;
}else if(id<1){
    id = count;
}

$("#slider>img").fadeOut(100);
$("#slider>img#"+id).fadeIn(100);

sliderInt = id;
sliderNext = id+1;
startSlider();

}
$("#slider>img").hover(
function(){
   stoploop();
},
function(){
   startSlider();
}
)
回复
阅读 4.6k
1 个回答

给父元素设置一个高度,不然图片height:100%不起作用

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏