如何把jQuery图像滑块内的HTML内容？

我想要设计一个页面，其中像页眉，导航栏，按钮，标题，段落等页面的内容应放置在幻灯片上。但问题是当我在div容器或body上添加内容时，内容没有正确显示在幻灯片上。任何人都可以告诉我该怎么办？
下面是代码：如何把jQuery图像滑块内的HTML内容？

<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>

来源

2015-08-30 Zain Farooq

保持滑块“相对”的位置，然后设置内容的绝对位置。这将是有益的，如果你可以张贴小提琴， – CodeRomeos

我已经尝试过，但它不起作用 –

如果你可以张贴小提琴 – CodeRomeos

尝试这个

<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>

来源

2015-08-30 06:40:36 CodeRomeos

检查了这一点http://jsfiddle.net/xfawfyaw/1/

CSS：

.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; 
}

HTML：

<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>

来源

2015-08-30 07:01:27 MozzieMD

标题单独出现在主体顶部而不是滑块。我想将内容放入滑块中 –

http://jsfiddle.net/xfawfyaw/1/ – MozzieMD

您需要学习css，因为这很容易，之后您可以使用代码来玩摩天大楼：D – MozzieMD

如何把jQuery图像滑块内的HTML内容？

回答

相关问题