Javascript HTML JQuery幻灯片放映_Javascript_Jquery_Html

Javascript HTML JQuery幻灯片放映

javascript jquery html

Javascript HTML JQuery幻灯片放映,javascript,jquery,html,Javascript,Jquery,Html,嗨，我一直在尝试使用HTML和jquery做幻灯片放映。我试图找出它为什么不起作用，但找不到原因？这就是我在这里写作的原因。我还试图获得导航左箭头和右箭头谢谢你的帮助 <!DOCTYPE html> <html> <head> <title>Roohi Health Screnning</title> <meta http-equiv="Content-Type" content="te

嗨，我一直在尝试使用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;
}


Roohi健康中心
$（函数（）{
$（“#幻灯片”）.slidesjs({
宽度：940，
身高：528
});
});
欢迎来到Roohi
























css
#航行{
字体系列：克鲁索；
颜色：#99；
保证金：-0px自动；
位置：realtive；}
#导航ul{
列表样式类型：无；/*删除项目符号*/
最小宽度：200px；}
#导航ulli{
显示：内联块；}
#导航：悬停{
背景色：#333}
#李娜，参观{
填充：20px；
显示：内联块；
文字装饰：无；
颜色：#999；}
#导航ul li：悬停ul{
显示：块；
}
#导航{
显示：无；
位置：绝对；}
#导航系统{
显示：block；}
#导航ul li a：悬停{
显示：块；
位置：相对位置；
}
#导航李：第n个孩子（3）{
右填充：80px；}
#导航李：第n个孩子（4）{
左填充：80px；}
.标志{
背景：url（images/Roohi-logo1.png）50%0无重复；
背景尺寸：100px 90px；
宽度：100px；
高度：90px；
位置：绝对位置；
顶部：30px；
左：360px；
}
页脚
{
显示：表格行；
高度：1px；
背景颜色：蓝色；
}

仔细查看他们在上的示例。请密切关注他们的图像样本标记。它们是一个div里面的图像，而不是像你所看到的那样，li里面的图像，ul里面的图像，div里面的图像

另外，你在你的问题中粘贴了一堆CSS，假设它们在你的真实站点中的一个适当的样式块中

至于箭头链接，它们为您提供了上一个和下一个链接，您可以将这些链接设置为箭头样式。

到底是什么不起作用？你期望它做什么，它在做什么呢？幻灯片显示了所有的图像，但不是在幻灯片中，我还希望使用箭头在网站中导航