javascript - 画像の上に画像を配置する

Question

私はスライダー（カルーセル）を作成していて、これまでのところ成功していますが、ここで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は私を助けてくれます...ありがとう

score 0 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

最初に、ボタンを囲むコンテナーがでスタイル設定さ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;
}

javascript - 画像の上に画像を配置する

2 に答える 2

Related

Reference