イメージローテータ及びページャとしてjQueryのサイクルのプラグインを使用して問題

StackOverflow https://stackoverflow.com/questions/913639

質問

私はtumbsと大きな画像用のページャを作るために、私は成功しないために、jQueryのを使用しようとしています。

私はjQueryのサイトからこの例を使用しています、私は方向に続くと思いますworknigしていないようです。

私は、最初の画像だけではなく、それらのすべてが、無ページャを参照ください。 私は何かが足りないのですか？

だからここに私のHTMLです：

<!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 runat="server">
    <title></title>

    <script src="jquery-1.3.2.js" type="text/javascript"></script>

    <script src="jquery.cycle.all.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#slideshow').before('<ul id="nav">').cycle({
                fx: 'turnDown',
                speed: 'fast',
                timeout: 0,
                pager: '#nav',

                // callback fn that creates a thumbnail to use as pager anchor 
                pagerAnchorBuilder: function(idx, slide)
                {
                    return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
                }
            });
        });
    </script>

    <style type="text/css">
#slideshow { left: 20px }
#nav { width: 300px; margin: 15px }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="slideshow" >
        <img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
        <img src="http://www.cssnz.org/flower.jpg" />
        <img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
    </div>
    </form>
</body>
</html>
役に立ちましたか？

解決

あなたは、コンテナを追加する必要があります。

例

<body>
   <form id="form1" runat="server">
      <ul id="nav"></ul>  <!-- You need this -->
      <div id="slideshow">
         <img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
         <img src="http://www.cssnz.org/flower.jpg" />
         <img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
      </div>
   </form>
</body>

アップデートます：

スライドショーの下にページの下部に水平方向について

あなたはこのCSSを追加する必要があります。

#nav li{
  float: left;
}

と

とHTMLの変更 

   <form id="form1" runat="server">
      <div id="slideshow">
         <img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
         <img src="http://www.cssnz.org/flower.jpg" />
         <img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
      </div>
      <ul id="nav"></ul>  <!-- You need this -->
   </form>

他のヒント

あなたは、ドキュメントの準備が完了したときにサイクリングを開始することになっていますか？私はサイクラーに慣れていないんだけど、代わりにこれを試してください：

<script type="text/javascript">
    $(function() {
        $('#slideshow').before('<ul id="nav">').cycle({
            fx: 'turnDown',
            speed: 'fast',
            timeout: 0,
            pager: '#nav',

            // callback fn that creates a thumbnail to use as pager anchor 
            pagerAnchorBuilder: function(idx, slide)
            {
                return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
            }
        });
     });    
</script>

おそらくあなたは、ドキュメントの準備ができていなかったので、まだ存在していなかった要素にサイクラーを実行しようとしていました。また、私は...つまり、あなたが.before('<ul id="nav" />').cycle()を持っている必要があり、要素を作成するための構文は、自動閉鎖であることを必要としますと思いますが、私はまだjQueryののインとアウトに非常に精通していないよ。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top