Question

我使用css创建了一个滑块，当用户点击向左移动时，它左右两个链接滑块向左移动500px，当点击向右移动然后滑块向右移动500px。问题是它只移动一次。我希望每次用户点击向左移动或向右移动时移动。

以下是HTML代码：

<div id="genericslider">
    <a href="#" class="left">Move Left</a>
    <a href="#" class="right">Move Right</a>
        <div id="content" class="scroller touchcarousel wide">



            <ul class="block-list scroller touchcarousel-container">

                <li id="post-833" class="post-833 graff-history type-graff-history status-publish hentry touchcarousel-item intro">
                    <header class="entry-header">
                        <h1 class="formatted-title">
                                                    <span style="padding-left:0px;font-size:25px">Press Releases</span> <span class="part-1"></span></h1>

                    </header><!-- .entry-header -->
                    <div class="entry-content">
                    Our presence in Indian Press
        &nbsp;          </div>
        <p style="font-size:10px !important" ><a href="#" id="click"> Click and drag your mouse</a></p>
                </li><!-- #post-833 -->

                        <li class="touchcarousel-item history-items horiz hide-before-ready" style="width: 17700px;">

        <div id="post-833" class="post-833 graff-history type-graff-history status-publish hentry history-item">

            <div class="entry-thumbnail">


            <div class="entry-content">
                            <h2 class="heading" style="padding-top:290px"><a href="#">3<sup>rd</sup> Aug 2013</a></h2>
                            <p>Kolhapur Times</p>
                        <div class="building-icon"> <img width="174" height="175" src="../../images/12345.jpg" class="attachment-history-thumbnail wp-post-image" alt="Times Asia" title="Times Asia" style="box-shadow: 5px 5px !important";/></a> </div>

            </div>

        </div>

        <div id="post-839" class="post-839 graff-history type-graff-history status-publish hentry history-item">
            <div class="entry-content">
                            <h2 class="heading" style="padding-left:10px"><a href="#">4<sup>th</sup> Aug 2013</a></h2>
                            <p style="padding-left:10px">Kolhapur Times</p>
                    <div class="building-icon"><img width="174" height="175" src="../../images/23456.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div>

            </div>

        </div>

        <div  class="post-839 graff-history type-graff-history status-publish hentry history-item">
            <div class="entry-content">
                            <h2 class="heading" style="padding-top:290px"><a href="#">16<sup>th</sup>Aug 2013</a></h2>
                            Bangalore Times</h2>
                    <div class="building-icon"><img width="174" height="175" src="../../images/TOIBG_2013_8_16_27.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div>

            </div>

        </div>

        <div id="post-841" class="post-841 graff-history type-graff-history status-publish hentry history-item">
            <div class="entry-content">
                            <h2 class="heading" style="padding-top:0px"><a href="#">30<sup>th</sup>Aug 2013</a></h2>
                            Bombay Times</h2>
                    <div class="building-icon"><img width="174" height="175" src="../../images/TOIM_2013_8_30_37.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div>

            </div>

        </div>

        <div id="post-841" class="post-841 graff-history type-graff-history status-publish hentry history-item">
            <div class="entry-content">
                            <h2 class="heading" style="padding-top:290px"><a href="#">13<sup>th</sup>Sep 2013</a></h2>
                            Ahmedabad Times</a></h2>
                    <div class="building-icon"><img width="174" height="175" src="../../images/TOIA_2013_9_13_24.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div>

            </div>
    </ul>

    </div>

这是Jquery代码：

<script>
$(document).ready(function(){
$(".left").click(function(){
    $(".touchcarousel-item").animate({left:'-500px'});
    //alert();
})
$(".right").click(function(){
    $(".touchcarousel-item").animate({right:'-500px'});
})
})
</script>

Answer 1

$("#genericslider").on("click",".left",function(e){
   e.preventDefault();
    $(".touchcarousel-item").animate({left:'-500px'});
    //alert();
})


$("#genericslider").on("click",".right",function(e){
   e.preventDefault();
    $(".touchcarousel-item").animate({right:'-500px'});
    //alert();
})

Answer 2

问题在于您将项目设置为同一点。单击其中一个按钮后，您可以设置为＆＃39; -500px＆＃39;。再次点击它后，它会再次尝试设置动画，但位置已经＆＃39; -500px＆＃39;所以什么都没有改变。

请尝试以下代码：

<script>
$(document).ready(function(){
$(".left").click(function(){
    var currentPosition = parseInt( $(".touchcarousel-item").css('left') );
    $(".touchcarousel-item").animate({left: currentPosition - 500});
    //alert();
})
$(".right").click(function(){
    var currentPosition = parseInt( $(".touchcarousel-item").css('right') );
    $(".touchcarousel-item").animate({right: currentPosition - 500});
})
})
</script>

此外，我建议仅设置left或right值的动画，而不是两者。例如：点击.left时，您可以为left: currentPosition - 500设置动画，当您点击.right时，您可以为left: currentPosition + 500设置动画。

滑块不再移动Jquery

2 个答案: