0

私はスライダー(カルーセル)を作成していて、これまでのところ成功していますが、ここで1つの場所で立ち往生しています私のコードです

スクリプト

$(document).ready(function() {

//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);

//grab the width and calculate left value
var item_width = $('.slides li').outerWidth(); 
var left_value = item_width * (-1); 

//move the last item before first item, just in case user click prev button
$('.slides li:first').before($('.slides li:last'));

//set the default item to the correct position 
$('.slides ul').css({'left' : left_value});

//if user clicked on prev button
$('.prev').click(function() {

    //get the right position            
    var left_indent = parseInt($('.slides ul').css('left')) + item_width;

    //slide the item            
    $('.slides ul:not(:animated)').animate({'left' : left_indent}, 1000,function(){    

        //move the last item and put it as first item               
        $('.slides li:first').before($('.slides li:last'));           

        //set the default item to correct position
        $('.slides ul').css({'left' : left_value});

    });

    //cancel the link behavior            
    return false;

});


//if user clicked on next button
$('.next').click(function() {

    //get the right position
    var left_indent = parseInt($('.slides ul').css('left')) - item_width;

    //slide the item
    $('.slides ul:not(:animated)').animate({'left' : left_indent}, 1000, function () {

        //move the first item and put it as last item
        $('.slides li:last').after($('.slides li:first'));                  

        //set the default item to correct position
        $('.slides ul').css({'left' : left_value});

    });

    //cancel the link behavior
    return false;

});        

//if mouse hover, pause the auto rotation, otherwise rotate it
$('.slides').hover(

    function() {
        clearInterval(run);
    }, 
    function() {
        run = setInterval('rotate()', speed);   
    }
); 

});

   //a simple function to click next link
  //a timer will call this function, and the rotation will begin
  function rotate() {
$('.next').click();
   }



   </script>

そしてcssは

 <style>
 .carousel {
margin:0 auto;
overflow:hidden;
            }

  .slides {
overflow:hidden;
/* fix ie overflow issue */
position:relative;
width:735px;
height:198px;
padding-bottom:13px;
         }

    /* remove the list styles, width : item width * total items */  
    .slides ul {
left:0;
top:0;
list-style:none;
margin:0;
padding:0;  
width:3000px;
float:left;
position:absolute;
               }

    /* width of the item, in this case I put 250x250x gif */
    .slides li {
float:left;
list-style:none;
width:735px;
               }

    .slides li img {
padding:0;
                   }

    /* Styling for prev and next buttons */
    .slides ul li.buttons {
display:block;  
position:relative;

    }

    .buttons a {
display:block;
width:22px; 
height:46px;
text-indent:-999em;
float:left;
               }

     a.prev {
background:url(Wireframes_Carousels/sprite/sprite.png) 0px -100px no-repeat;
            }

    a.prev:hover {
background:url(Wireframes_Carousels/sprite/sprite.png) -60px -100px no-repeat;
                 }

    a.next {
background:url(Wireframes_Carousels/sprite/sprite.png) -30px -100px no-repeat;

          }

    a.next:hover {
background:url(Wireframes_Carousels/sprite/sprite.png) -90px -100px no-repeat;
                 }


    .txt{
float:left;
text-align:left;
position:absolute;
margin-top:26px;
margin-bottom:19px;
}

    .txt h1{
margin-left:34px;
display:inline;
font: "Trebuchet MS", bold, 25px;
color:#003399;


}

    .txt p{
margin-left:34px;
font:Verdana,Reg.,18px;
color:#444;
line-height:23px;
}
    .learn_btn
    {
margin-left:32px;
display:block;
background:url(Wireframes_Carousels/sprite/sprite.png) 0px 0px no-repeat;
width:133px;
height:42px;
margin-bottom:-13px;

    }
    .learn_btn:hover
    {
background:url(Wireframes_Carousels/sprite/sprite.png) 0 -50px no-repeat;


}

    .slide_pos
    {
padding-left:300px;
margin-bottom:15px;



}
    .slide_pos ul li img
    {
    }
    </style>

そしてHTMLは:

     <body>

     <div class="carousel">

 <div class="slides"> 


    <ul>

        <li>                
                <span class="buttons">
                <a href="#" class="prev">prev</a>
                </span>
                <span class="buttons" style="float:right">
                <a href="#" class="next">next</a>
                </span>
            <span class="txt">



                    <h1>New to Intuit App Center?</h1>
                    <p>Discover the right apps <br/> for QuickBooks</p>
                    <a class="learn_btn" href="#"></a>




            </span>

            <img src="Wireframes_Carousels/sprite/hero-banner1.jpg"  alt="Slide 1"/>


        </li>

        <li>


            <span class="txt">
                    <h1>New to Intuit App Center?</h1>
                    <p>Discover the right apps <br/> for QuickBooks</p>
                    <a class="learn_btn" href="#"></a>                                                




            </span>


            <img src="Wireframes_Carousels/sprite/hero-banner2.jpg" alt="Slide 2"/>

        </li>

        <li>


            <span class="txt">
                    <h1>New to Intuit App Center?</h1>
                    <p>Discover the right apps <br/> for QuickBooks</p>
                    <a class="learn_btn" href="#"></a>                                                




            </span>


            <img src="Wireframes_Carousels/sprite/hero-banner3.jpg" alt="Slide 3"/>

        </li>

        <li>


            <span class="txt">
                    <h1>New to Intuit App Center?</h1>
                    <p>Discover the right apps <br/> for QuickBooks</p>
                    <a class="learn_btn" href="#"></a>                                                




            </span>


            <img src="Wireframes_Carousels/sprite/hero-banner4.jpg" alt="Slide 4"/>

        </li>


    </ul>

</div>

    </div>

    </body>

スライド画像の左側と右側にそれぞれナビゲーションボタンを配置したいのですが、それができません...位置を絶対値などに変更しようとしましたが、どうすればよいかわかりません。動作していません...これらのボタンは画像と一緒にスライドしないでください...plssssssssは私を助けてくれます...ありがとう

4

2 に答える 2

0

私が正しく理解している場合、次のボタンと前のボタンだけを他のすべての上に置き、各スライドでスライドしないように修正する必要がありますか? その場合、jquery や JavaScript の問題ではなく、CSS だけの問題です。私はこれを試してみます。

それらをスパンから取り出し、buttonsそれぞれにクラスを追加し<a>leftright.

.buttons{position:absolute; z-index:999;}
.left{left:20px; bottom:20px;}
.right{right:20px; bottom 20px;}

必要に応じて上記を明らかに変更し、別の場所でそれらが必要になります。

また、タグから取り出し<li>て、 の位置にあるスライダー ホルダー コンテナーに直接入れる必要がありrelativeます。

于 2013-02-07T20:54:51.540 に答える
0

最初に、ボタンを囲むコンテナーが でスタイル設定さposition: relative; れ、ボタンが両方とも でスタイル設定されていることを確認する必要がありますposition: absolute;。これにより、、、 の後にパーセンテージまたはピクセルが続くスタイルを使用して、コンテナ内のボタンをコンテナpositioned内の任意の場所に配置できます。relativetopbottomleftright

jsfiddle: http://jsfiddle.net/hZ9f4/

- また -

例:

.buttons {
    position: absolute;
    z-index: 99999; /* to insure the buttons stay above the images at all times */
}
#prev {
    top:0;
    left:0;
}
#next {
    top:0;
    right:0;
}
于 2013-02-07T20:57:17.953 に答える