如何在我的内容滑块中添加子弹导航

我是一个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>

请有人帮我吗？

预先感谢！

您想要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>

通过使用嵌套锚标签（＆lt; a>），您也可以将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>

相关内容

最新更新

热门标签：