Javascript 如何将html内容放入jquery图像滑块中？_Javascript_Jquery_Html_Css

Javascript 如何将html内容放入jquery图像滑块中？

javascript jquery html css

Javascript 如何将html内容放入jquery图像滑块中？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想设计一个页面，其中的内容，如标题，导航栏，按钮，标题，段落等应该放在幻灯片上。但问题是，当我在div容器或主体上添加内容时，内容不会正确地显示在幻灯片上。有人能告诉我该怎么办吗？代码如下： <html> <head> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javas

我想设计一个页面，其中的内容，如标题，导航栏，按钮，标题，段落等应该放在幻灯片上。但问题是，当我在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>
    <h3>This is heading</h3>//It is not appearing properly

     <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%" />
           <p>This is paragraph</p>// this is insides div and also not appearing properly
          </div> 
    </body>
</html>

试试这个

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/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:relative;  
            left:0;
            top:0;
            margin-right:0;
        } 

        .pics img {  //style of images
            width:  100%; 
            height: 100%; 
        } 
        .content{
        position:absolute;  
        top:10;
        left:10;
        color:#fff;
        padding:10px;
        background: rgba(45, 195, 89, 0.57);
        z-index:99
        }
    </style>
</head>
<body>
<div class="pics"> <!--Slider images goes here-->
        <img src="http://dummy-images.com/abstract/dummy-480x270-Stripes.jpg" width="100%" height="500" /> 
        <img src="http://dummy-images.com/abstract/dummy-454x280-Glass.jpg" width="100%" height="100%" /> 
        <img src="http://dummy-images.com/abstract/dummy-576x1024-Bottles.jpg" width="100%" height="500" /> 
 </div> 
       <div class="content"> <!--Slider content goes here-->
       <h3>This is heading</h3>
       <p>This is paragraph This is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraph This is paragraph</p>
       </div>
</body>

看看这个

CSS:

HTML:

保持滑块的位置为“相对”，然后为内容设置位置：绝对。如果你可以发布一个提琴，这将是有帮助的，我已经尝试过了，但它不起作用。如果你可以发布一个提琴，这将是有帮助的。很抱歉，我无法使用提琴内容显示，但滑块不起作用，图像从div container溢出。标题单独显示在主体顶部，而不是滑块中。我想让内容进入幻灯片你需要学习css，因为它很简单，之后你可以玩代码并制作摩天大楼：你能告诉我css的哪个属性/属性我应该use@ZainFarooq检查新的JSFIDLE链接，我编辑了答案，有代码！这是工作，但我可以使用增加宽度的容器？

.pics {  
    height:  500px;  
    width:   100%;
    position:relative;  
    left:0;
    top:0;
    margin-right:0;
    overflow:hidden;

} 
.slide div, .slide img {
    height:500px;

}
.slide p {
    position:absolute;
    bottom:-12px;
}
.slide h3 {
    position:absolute;
    top:-20px;

}
.slide h3, .slide p {
    background:rgba(0,0,0,0.5);
    color:#fff;
    left:0;
    right:0;
    padding:10px;
}

<div class="pics">
    <div class="slide">
        <h3>This is heading</h3>
        <p>This is paragraph</p>
        <img src="http://www.mundologia.de/wp-content/uploads/raemisgummen_0188-1080x500.jpg" width="100%" height="500" />
    </div>

    <div class="slide">
        <h3>This is heading</h3>
        <p>This is paragraph</p>
        <img src="http://www.cycletrailsaustralia.com/images/832.jpg" width="100%" height="100%" />
    </div>

    <div class="slide">
        <h3>This is heading</h3>
        <p>This is paragraph</p>
        <img src="http://www.webidesigns.com/wp-content/uploads/2015/03/nature-background-cities-flowers-papel-images-wallwuzz-hd-wallpaper-18115-1080x500.jpg" width="100%" height="100%" />
    </div>  
</div>