您的位置:首页 > Web前端 > JQuery

Jquery控制div滚动,但不显示滚动条

2016-04-21 19:43 363 查看

Jquery控制div滚动,但不显示滚动条

Html代码:

<div class="dv_phone_pic">
<div class="prew_box">
<div class="dv_icon" id="prew"></div>
</div>
<div id="dv_pics_box"></div>
<div class="next_box">
<div class="dv_icon" id="next"></div>
</div>
</div>

Css样式

.dv_phone_pic{
width: 1200px;
height: 500px;
margin: auto;
background-color:#333
}
#dv_pics_box{
width: 900px;
height: 500px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
float: left;
overflow-y:hidden;
overflow-x: hidden;
}
.dv_icon{
width: 60px;
height: 60px;
float: left;
cursor: pointer;
}
.prew_box{
width: 60px;
height: 60px;
float: left;
margin: 240px 20px;
}
.next_box{
width: 60px;
height: 60px;
float: left;
margin: 240px 20px;
}
#prew{
background-image: url("../images/pre2.png");
background-repeat: no-repeat;
}
#next{
background-image: url("../images/next2.png");
background-repeat: no-repeat;
}


JS代码:

var jsonArray=eval(data.message.imgs);
var picCount=jsonArray.length;
var boxWidth=picCount*300;
console.log("box Width: "+boxWidth);
var t=' <div class="dv_phone_pic_content" style="width:'+boxWidth+'px">';
for(Picitem in jsonArray){
var img=jsonArray[Picitem];
console.log("imgs Item:"+img);
t+='<img class="img_app_pic_item" src="' + img + '"/>';
}
t+='</div>';
$("#dv_pics_box").html(t);


说明:我的图片是从网络获取的,有多张。

效果展示图:




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: