如何把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內容？

回答

相關問題