Question

我正在创建一个滑块（旋转木马），到目前为止我还没有成功，但我被困在一个地方这是我的代码

脚本

$(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帮助我...谢谢

Answer 1

如果我不正确，你只需要在其他所有内容上面设置下一个和上一个按钮并进行修复，这样它们就不会随每张幻灯片一起滑动？在这种情况下，它不是一个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的滑块固定器容器中。

Answer 2

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

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

- 或 -

示例：

right

将图像定位在图像上

2 个答案: