0

私は 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>

誰かこれで私を助けてください。

前もって感謝します！

4

1 に答える 1

0

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>

ネストされたアンカー タグ (< 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>
于 2012-12-24T21:00:06.853 に答える