个人中心
gpt4 book ai didi

jquery - 背景图像 slider 延伸过去屏幕

转载 作者：行者123 更新时间：2023-11-28 06:15:35 24 4
gpt4 key购买 nike

早上好，我马上开始讲肉和土 bean 。我一直在绞尽脑汁，其他一些人也在绞尽脑汁研究如何让这个启动页面背景图像 slider 的图像不会溢出。一切都设置为 100%，所以理论上它应该填满屏幕，仅此而已。或者我是这么想的。以下是当前正在使用的代码。

#icontent .background-slideshow-main{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#icontent #maximage img {width: 100%;min-height: 100%;display: none; }
#icontent #maximage img:first-child {display: block;}
#icontent #cycle-loader{display: none;}


    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,200italic,400italic" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lora:400italic,700italic' rel='stylesheet' type='text/css'>

    <!-- Carousel CSS -->
    <link href="/files/theme/owl.carousel.css" rel="stylesheet">

    <!-- SPLASH PAGE LOAD CSS -->
    <link href="/files/theme/icon-bounce.css"  type="text/css" rel="stylesheet">
    <link href="/files/theme/jquery.gala-maxi.min.css"  type="text/css" rel="stylesheet">

    <!-- LOAD SCRIPT -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Responsive -->
    <meta name="viewport" content="initial-scale=1">
    <link rel="stylesheet" media="all and (max-width: 1024px)" href="/files/theme/responsive.css">
    <script src="/files/theme/mobilenav.js"></script>

</head>

<body class='splash-page gala-maxi  wsite-theme-light'>

    <div id="main-content-page">

        <div class="container">

            <button id="close-button" class="content-change"> </button>

            <div id="search-bar"><div class="content-wrapper">{search}</div></div>

            <nav id="site-navigation" role="navigation">

                <div class="nav clearfix table">

                    <div id="logo" class="table-content">{logo}</div>

                    <div id="navigation" class="clearfix table-content">{menu}</div>


                    <div class="social-frame table-content">{social}</div>

                    <div id="search-button" class="table-content"><i class="af-search"></i></div>

                </div>

            </nav>      

            <div class="content-wrapper">

                <div class="content large-padding">{content}</div>

            </div>

            <footer id="footer" class="clearfix">       

                <div class="content-wrapper">

                    <div id="footer-content" class="med-padding">{bottom:content}</div>

                    <div id="footer-content" class="med-padding" style="display:none;">{footer}</div>

                    <a href="#site-navigation" class="btt">BACK TO TOP</a>

                    <div class="aligncenter xsmall-padding">

                            <div class="copyright">{copyright:text}</div>

                    </div>

                </div> 

            </footer>

        </div>

    </div>

    <div id="home-page">    

        <div class="background-slideshow-main" >
            <img id="cycle-loader" src="/files/theme/maxi-loader.gif" />
            <div id="maximage">
                <img src="http://www.weebly.com/editor/uploads/4/3/9/2/43921627/custom_themes/935851054638803653/files/Innovative.jpg" alt=""  />
                <img src="http://www.weebly.com/editor/uploads/4/3/9/2/43921627/custom_themes/935851054638803653/files/Quality.jpg" alt=""  />
                <img src="http://www.weebly.com/editor/uploads/4/3/9/2/43921627/custom_themes/935851054638803653/files/Dedication.jpg" alt="" />
            </div>
        </div>

        <div class="home-page-content">

            <!-- Change Logo Position Here -->
            <header id="home-header" class="  onload">          
                <div class="content-wrapper">
                    <div id="home-logo" class="small-padding">{home:logo}</div>
                    <nav id="home-navigation" role="navigation" class="small-padding">{menu}</nav>
                    <div class="note"><p>The home top navigation bar ONLY display MAIN tabs. The navigation bar of the page will display submenus</p></div>
                </div>
            </header>

            <div id="height-adjust" class="content-wrapper center-content table onload">

                <div class="med-padding table-content">

                    <div class="note"><p>Content will be centered vertically and horizontally when site is published</p></div>

                    <!-- Insert TEXTBOX for Content Area -->
                    <div class="content">{feature:content global="false"}</div> 

                </div>

            </div>  

            <button id="open-button" class="content-change bounce"> </button>   

        </div>  

    </div>

    <!-- Background Slider -->
    <script src="/files/theme/jquery.cycle.all.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="/files/theme/jquery.maximage.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
            jQuery( document ).ready(function( $ ) {
                $('#maximage').maximage({
                    cycleOptions: {
                    },
                    onFirstImageLoaded: function(){
                        $('#cycle-loader').hide();
                        $('#maximage').fadeIn('fast');
                    }
                });             

            });
    </script>


    <!-- Script Files -->   
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>    

    <!-- Carousel -->
    <script src="/files/theme/owl.carousel.min.js"></script>

    <!-- Video Lightbox -->
    <script src="/files/theme/jquery.colorbox-min.js"></script>

    <!-- Splash Page js -->
    <script src="/files/theme/basic-splashpage.js"></script>    

    <script>
    jQuery( document ).ready(function( $ ) {

        // Video Lightbox Widget - **EDIT VIDEO POPUP SIZE HERE**
        $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
        $(".vimeo").colorbox({iframe:true, innerWidth:640, innerHeight:390});

        // Initiate Carousel
        $(".5item-carousel").owlCarousel({
          // autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
          pagination : false, //Turn on Page tabs by changing "false" to "true"
          navigation : true,  //Turn off previous & next arrow by chaning "ture" to "false"
          itemsDesktop : [1024,4], 
          itemsDesktopSmall : [786,3],
          itemsTablet: [600,2],
          itemsMobile : [384,1], 
          lazyLoad : true   
        }); 

        $(".4item-carousel").owlCarousel({
          // autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
          pagination : false, //Turn on Page tabs by changing "false" to "true"
          navigation : true,  //Turn off previous & next arrow by chaning "ture" to "false"
          items : 4,
          itemsDesktop : [1024,4], 
          itemsDesktopSmall : [786,3],
          itemsTablet: [600,2],
          itemsMobile : [384,1],
          lazyLoad : true   
        }); 


        $(".3item-carousel").owlCarousel({
          // autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
          pagination : false, //Turn on Page tabs by changing "false" to "true"
          navigation : true,  //Turn off previous & next arrow by chaning "ture" to "false"
          items : 3,
          itemsDesktopSmall : [1024,3],
          itemsTablet: [786,2],
          itemsMobile : [384,1],
          lazyLoad : true   
        }); 

        $(".2item-carousel").owlCarousel({
          // autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
          pagination : false, //Turn on Page tabs by changing "false" to "true"
          navigation : true,  //Turn off previous & next arrow by chaning "ture" to "false"
          items : 2,
          itemsTablet: [1024,2],
          itemsMobile : [384,1],
          lazyLoad : true   
        }); 


        $(".1item-carousel").owlCarousel({
          // autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
          pagination : false, //Turn on Page tabs by changing "false" to "true"
          navigation : true,  //Turn off previous & next arrow by chaning "ture" to "false"         
          singleItem : true,
          lazyLoad : true
        }); 

    });
    </script>

</body>
</html>

然后是最后一个问题，为什么图像只是从一个到另一个，没有褪色？

这是实际发生的情况的图像。 Screenshot of preview

最佳答案

尝试在 c 中使用视口(viewport)单位而不是百分比

height: 100vw;
width: 100vw;

关于jquery - 背景图像 slider 延伸过去屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35917959/

24 4 0
文章推荐： css - 如何使图像大于网站，使网站保持在 100vh
文章推荐： c++ - 创建通用模板类以按变量对不同类进行排序
文章推荐： C++ getchar 不能正常工作
文章推荐： html - 在页面中心可见部分显示加载动画
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com