Question

我想设计一个页面，其中页面的内容，如标题，导航栏，按钮等应放在幻灯片上。但问题是当我在div容器或主体上添加内容时，内容不会出现在幻灯片中。任何人都可以告诉我该怎么做？这是代码：

<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){ //This is jquery code for fade slideshow
                $('.pics').cycle('fade');
            });
        </script>
        <style type="text/css">
            .pics {  //this is style of container (div) which contain images
                height:  100%;  
                width:   100%;
                position:absolute;  
                left:0;
                top:0;
                margin-right:0;
            } 

            .pics img {  //style of images
                width:  100%; 
                height: 100%; 
            } 
        </style>
    </head>
    <body>
        <div class="pics"> //html code for container
            <img src="adv1_wheels_ferrari_f430-HD.jpg" width="100%" height="500" /> 
            <img src="kepler_motion-HD.jpg" width="100%" height="100%" /> 
            <img src="nissan_gt_r_gold-HD.jpg" width="100%" height="100%" />
        </div> 
    </body>
</html>

Answer 1

如果您在css代码中更改height的{{1}}属性，则幻灯片显示正常。

检查这个小提琴 - click here

希望它有所帮助..！

编辑 - 带有可见标题 click here

如何将HTML内容添加到幻灯片中？

1 个答案: