HTML JQuery幻燈片放映

嗨，我一直在試圖做一個使用HTML和jQuery的幻燈片放映。我試圖找出爲什麼它不工作，但無法找出原因？這就是我在這裏寫作的原因。我也試圖讓導航左右箭頭。HTML JQuery幻燈片放映

謝謝你的幫助。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Roohi Health Screnning</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" type="text/css" href="roohiSTYLE.css"> 
     <!--------- SCRIPT FOR SLIDER---------> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="jquery.slides.min.js"></script> 


     <script> 
    $(function(){ 
     $("#slides").slidesjs({ 
     width: 940, 
     height: 528 
     }); 
    }); 
    </script> 
     </head> 
     <body> 



    <div id="wrapper"> 
     <header> 

     </header> 
     <section> 
     <!-- Content Starts Here --> 
     <header> 
      <h1> Welcome to Roohi</h1> 
     </header> 

     <!-- Navigation bar--> 
     <nav id="navigation"> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="product.html">Products</a> 
        <ul> 
         <li><a href="Waterless-Shampo.html">Waterless Shampoo</a></li> 
         <li><a href="Alcohol-Free.html">Alcohol-Free Soap</a></li> 
         <li><a href="Needle.html">Needle</a></li> 
        </ul> 
       </li> 

       <li><a href="About-us.html">About Us</a></li> 
       <li><a href="Service.html">Service</a> 
        <ul> 
         <li><a href="Blood-presureTest.html">BloodPresure</a></li> 
         <li><a href="test2.html">Test2</a></li> 
         <li><a href="Test3.html">test3</a></li> 
        </ul> 
       </li> 

       <li><a href="findus.html">FindUs</a></li> 
      </ul> 
     </nav> 
     <div class="logo"> 

     <a href="index.html"></a> 
     </div> 


      <div id="slides"> 
      <ul> 

      <li><img src="images/green-stripes.jpg"/></li> 

       <li><img src="images/blue-stripes.jpg"/></li> 
       <li><img src="images/pink-stripes.jpg"/></li> 
      </ul> 
      </div> 


     <!-- Content Ends Here --> 
     </section> 
     <footer> 

     </footer> 
    </div> 
    </body> 
</html> 


css 



#navigation{ 
    font-family: crusoe; 
    color:#99; 
    margin: -0px auto; 
    position: realtive;} 

#navigation ul{ 
    list-style-type: none; /*removes bullet points*/ 
    min-width:200px;} 

#navigation ul li { 
    display:inline-block;} 

#navigation ul li :hover{ 
background-color: #333} 

#navigation ul li a, visited { 
    padding:20px; 
    display:inline-block; 
    text-decoration:none; 
    color:#999;} 

    #navigation ul li:hover ul{ 
    display:block; 
     } 

#navigation ul ul { 
display: none; 
position:absolute;} 

#navigation ul ul li{ 
display: block;} 

#navigation ul ul li a:hover { 
    display:block; 
    position: relative; 
    } 

#navigation li:nth-child(3) { 
padding-right: 80px;} 

#navigation li:nth-child(4) { 
padding-left: 80px;} 


.logo { 
background: url(images/Roohi-logo1.png) 50% 0 no-repeat; 
background-size: 100px 90px; 
width: 100px; 
height: 90px; 
position: absolute; 
top: 30px; 
left: 360px; 
} 

footer 
{ 
    display: table-row; 
    height: 1px; 
    background-color: blue; 
}

來源

2014-06-06 user3677438

什麼不工作？你期待它做什麼，它做的是什麼？ – badAdviceGuy

幻燈片顯示所有的圖像，但不是在幻燈片放映，也希望用於瀏覽網站的箭頭 – user3677438

仔細看看他們的例子http://www.slidesjs.com/。密切關注其圖像的樣本標記。它們是div內的圖像，而不是像裏面的ul裏面的圖像。

此外，你粘貼了一堆CSS在你的問題，假設他們在你的真實網站的正確的樣式塊？

至於箭頭鏈接，他們提供您可以風格看起來像箭頭的上一個和下一個鏈接。

來源

2014-06-06 19:41:49

我試過了，但它不起作用，你可以看看文件嗎？ – user3677438

HTML JQuery幻燈片放映

回答

相關問題