jquery - 当我的图像超出页面时,如何摆脱水平滚动条?

标签 jquery html css

所以我的图像超出了屏幕范围,因为我想要全屏幻灯片,我想知道如何摆脱水平滚动条..?

            <div class="fadein">
<head>

    <meta charset="utf-8" />
    <title> Iamdrivingtoday.com </title>
    <link rel="stylesheet" href="mfcc.css">

<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#html{
    overflow:hidden;
}
#fadein {
    position: relative;
    width: 100%;
    height: 100%
}

#fadein img {
    position:absolute;
    left:0;
    top:0;
}


-->
</style>


</head>

如您所见,宽度为 1500,我想保持这种状态,那么如何去掉水平滚动条?

<body>
        <div id="big_wrapper">
            <header id="top_header">
                <img src="iadt.jpg" height="100" width="300"> </img>
            </header>

            <center><nav id="top_menu">
                    <ul>
                        <li><a href="Iamdrivingtoday.com/Home">Home</a></li>
                        <li><a href="Iamdrivingtoday.com/Application">Application</a></li>
                        <li><a href="Iamdrivingtoday.com/Privacy Policy">Privacy Policy</a></li>
                        <li><a href="Iamdrivingtoday.com/ContactUs">Contact Us</a></li>
                    </ul>
            </nav>  </center>

                <div class="fadein">
    <img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -125px;">
    <img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -125px;">
    <img src="images/slide.jpg"  width=1500 height=308 style="position: absolute; left: -125px;">   

</div>

<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>

最佳答案

只需将其添加到您的包含类

.fadein{
   overflow: hidden;
}

那行得通

关于jquery - 当我的图像超出页面时,如何摆脱水平滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24965417/

相关文章:

javascript - Bootstrap-Tour RTL Popover 位置

jquery 不是带有嵌套元素的选择器

html - 基于用户屏幕分辨率的网页尺寸

javascript - 如何在 JavaScript 中重用 SASS 变量

css - 在 CSS 中如何让子元素受其父元素的宽度约束?

javascript - 如何追加Js变量

javascript - 使用 Javascript 防止刷新 'Jump'

javascript - 如何从 HTML 5 Canvas 动画链接

html - 网页字体的不同样式和粗细是如何渲染的?

css - 自定义 css 仅在页面缩小后应用 - Bootstrap