0

我正在创建一个滑块（轮播），到目前为止我很成功，但我被困在一个地方这是我的代码

剧本

$(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>

我希望我的导航按钮 prev 和 next 分别位于滑动图像的左侧和右侧，但我无法做到这一点......我尝试将位置更改为绝对等，但我不知道该怎么做，因为它似乎是不工作...这些按钮不应该与图像一起滑动...请帮帮我...谢谢

4

2 回答 2

0

如果我理解正确，您只希望将下一个和上一个按钮放在其他所有内容之上并进行修复，这样它们就不会随着每张幻灯片一起滑动？在这种情况下，它不是 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.

于 2013-02-07T20:54:51.540 回答
0

您需要首先确保按钮周围的容器的样式为 ，position: relative; 并且按钮的样式都为position: absolute;。这允许容器内的按钮位于容器内的positioned任何位置，relative使用称为top、bottom、的样式left，right后跟百分比或像素。

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 回答