如何向我的内容滑块添加项目符号导航？答案

【问题标题】：How to add a bullet navigation to my content slider?如何向我的内容滑块添加项目符号导航？
【发布时间】：2012-12-24 20:22:17
【问题描述】：

我是一个 jQuery 初学者，我一直在根据我最近看到的一些教程构建一个内容滑块。

问题是：我不知道如何构建一个子弹导航来完成它。

到目前为止，这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>My content slider</title>    
         <style type="text/css">
            body {
               margin: 0 0 0 0;
            }
           .slider {
              width: 100%;
              height: 400px;
              overflow: hidden;
           }
           .slider div {
              width: 100%;
              height: 400px;
              display: none;
           }
           .img {
              width: 100%;
              height: 400px;
           }
           h1 {
              text-align: center;
              color:#F00;
              margin: auto;
              padding-top: 45px;
           }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        <script type="text/javascript">
           function Slider() {
              $(".slider #1").show("fade", 500);
              $(".slider #1").delay(5500)
                 .hide("slide", {direction: "left"}, 500);

              var sc=$(".slider div").size();
              var count=2;

              setInterval(function (){
                 $(".slider #"+count).show("slide", {direction: "right"}, 500);
                 $(".slider #" + count).delay(5500).hide("slide", {direction: "left"}, 500);

                 if(count==sc){
                    count=1;
                 } else {
                    count = count + 1;
                 }

              }, 6500);
           }
        </script>
     </head>
     <body onload="Slider();">
        <div class="slider">
           <div class="img" id="1" style="background-color:#0F0;">
              <h1>My text is here</h1>
           </div>
           <div class="img" id="2" style="background-color:#000;">
              <h1>My text is here</h1>
           </div>
           <div class="img" id="3" style="background-color:#FF0;">
              <h1>My text is here</h1>
           </div>
        </div>
     </body>
  </html>

请有人帮我解决这个问题？

提前致谢！

【问题讨论】：

标签： jquery navigation slider

【解决方案1】：

你想要http://www.w3schools.com/html/html_lists.asp吗？

你可以试试这个：

    <ul type="square">
     <li>Your text goes here</li>
    </ul>
    <ul type="circle">
     <LI>Your text goes here</li>
     <LI>Your text goes here</li>
     <LI>Your text goes here</li>
    </ul>
    <ul type="disc">
     <li>Your text goes here</li>
     <li>Your text goes here</li>
    </ul>

您还可以使用 CSS 使用您自己的手动要点：

     <style>
      ul { 
       list-style-image: url(/images/tick.gif); 
      } 
     </style>

通过使用嵌套锚标记 ()，您也可以将 URL 链接到它，也可以用于导航菜单。

    <ul type="disc">
     <li><a href="#">Your linked text goes here </a></li>
     <li><a href="#">Your linked text goes here </a></li>
    </ul>

【讨论】：

嗨。谢谢你的提问。但我真正想要的不是那个。这是一个使用 html 和 css 的简单导航菜单。我想要一个像这样的导航菜单：nivo.dev7studios.com/demos 我需要将它嵌入到我的 Jquery 代码中。干杯