jquery - 滚动完成后返回第一张幻灯片

Question

嗨，我在使用这个插件滑动内容时遇到了麻烦 http://www.copterlabs.com/demo/contentslider/我已经弄清楚了如何将它自动滑动到最后，但是当它到达时它不会回到第一张幻灯片最后一个。请看我的代码。

jquery.ennui.contentslider.js

    (function($) {
  $.fn.ContentSlider = function(options)
  {
    var defaults = {
      leftBtn : 'images/cs_leftImg.jpg',
      rightBtn : 'images/cs_rightImg.jpg',
      width : '900px',
      height : '400px',
      speed : 400,
      easing : 'easeOutQuad',
      textResize : false,
      IE_h2 : '26px',
      IE_p : '11px'
    }
    var defaultWidth = defaults.width;
    var o = $.extend(defaults, options);
    var w = parseInt(o.width);
    var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
    var x = -1*w*n+w; // Minimum left value
    var p = parseInt(o.width)/parseInt(defaultWidth);
    var thisInstance = this.attr('id');
    var inuse = false; // Prevents colliding animations

    function moveSlider(d, b)
    {
      var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
      if(isNaN(l)) {
        var l = 0;
      }
      var m = (d=='left') ? l-w : l+w;
      if(m<=0&&m>=x) {
        b
          .siblings('.cs_wrapper')
            .children('.cs_slider')
              .animate({ 'left':m+'px' }, o.speed, o.easing, function() {
                inuse=false;
              });

        if(b.attr('class')=='cs_leftBtn') {
          var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
          var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
        } else {
          var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
          var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
        }
        if(m==0||m==x) {
          thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
        }
        if(otherBtn.css('opacity')=='0') {
          otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
        }
      }
    }

    function vCenterBtns(b)
    {
      // Safari and IE don't seem to like the CSS used to vertically center
      // the buttons, so we'll force it with this function
      var mid = parseInt(o.height)/2;
      b
        .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
        .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
    }

    return this.each(function() {
      $(this)
        // Set the width and height of the div to the defined size
        .css({
          width:o.width,
          height:o.height
        })
        // Add the buttons to move left and right
        .prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>')
        .append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>')
        // Dig down to the article div elements
        .find('.cs_article')
          // Set the width and height of the div to the defined size
          .css({
            width:o.width,
            height:o.height
          })
          .end()
        // Animate the entrance of the buttons
        .find('.cs_leftBtn')
          .css('opacity','0')
          .hide()
          .end()
        .find('.cs_rightBtn')
          .hide()
          .animate({ 'width':'show' });

      // Resize the font to match the bounding box
      if(o.textResize===true) {
        var h2FontSize = $(this).find('h2').css('font-size');
        var pFontSize = $(this).find('p').css('font-size');
        $.each(jQuery.browser, function(i) {
          if($.browser.msie) {
             h2FontSize = o.IE_h2;
             pFontSize = o.IE_p;
          }
        });
        $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
        $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
        $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
      }

      // Store a copy of the button in a variable to pass to moveSlider()
      var leftBtn = $(this).children('.cs_leftBtn');
      leftBtn.bind('click', function() {
        if(inuse===false) {
          inuse = true;
          moveSlider('right', leftBtn);
        }
        return false; // Keep the link from firing
      });

      // Store a copy of the button in a variable to pass to moveSlider()
      var rightBtn = $(this).children('.cs_rightBtn');
      rightBtn.bind('click', function() {
        if(inuse===false) {
          inuse=true;
          moveSlider('left', rightBtn);
        }
        return false; // Keep the link from firing
      });

      vCenterBtns($(this)); // This is a CSS fix function.
    });
  }
})(jQuery)

脚本.js

$(document).ready(function(){

    setInterval(function(){
    $('.cs_rightBtn').click()
    },3000)
});

html

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title> Content Slider Demonstration | Ennui Design </title>

<body>

    <h1> Content Slider Demonstration </h1>
    <h2> Content Slider Version 1 </h2>
    <p>
        This content slider was implemented with the following code:
    </p>

$（函数（）{
    $('#one').ContentSlider({
        宽度：'900px'，
        高度：'400px'，
        速度：800，
        缓动：'easeInOutBack'
    });
});

    <div id="one" class="contentslider">
        <div class="cs_wrapper">
            <div class="cs_slider">

                <div class="cs_article">
                    <h2> <a href="#">Article Number One</a> </h2>
                    <a href="#">
                        <img src="images/article01.jpg"
                            alt="Artist's interpretation of article headline" />
                    </a>
                    <p>
                        Hendrerit tincidunt vero vel eorum claritatem. Soluta
                        legunt quod qui dolore typi. Vel dolore soluta qui odio
                        non. Sollemnes minim eorum feugiat nihil nobis. Gothica
                        dolor in legentis nihil quinta.
                    </p>
                    <p>
                        Iriure parum autem putamus lectores duis. Quam sit quis
                        me me zzril. Facer etiam in lectores hendrerit etiam.
                        Exerci lorem liber tincidunt nostrud decima. Mutationem
                        est zzril ipsum facer nobis.
                    </p>
                    <a href="#" class="readmore">Read More</a>
                </div><!-- End cs_article -->

                <div class="cs_article">
                    <h2> <a href="#">Article Number Two</a> </h2>
                    <a href="#">
                        <img src="images/article02.jpg"
                            alt="Artist's interpretation of article headline" />
                    </a>
                    <p>
                        Nibh nihil et ex accumsan insitam. Qui lius congue
                        hendrerit quam vero. Demonstraverunt molestie ipsum
                        magna nobis sequitur. Ex diam euismod quis ii velit.
                    </p>
                    <p>
                        In quam lectores placerat Investigationes illum. Diam
                        sollemnes nihil lorem claram consectetuer. Eros nam
                        placerat claritas claritatem congue. Adipiscing ut
                        clari suscipit nulla habent.
                    </p>
                    <a href="#" class="readmore">Read More</a>
                </div><!-- End cs_article -->

                <div class="cs_article">
                    <h2> <a href="#">Article Number Three</a> </h2>
                    <a href="#">
                        <img src="images/article03.jpg"
                            alt="Artist's interpretation of article headline" />
                    </a>
                    <p>
                        Clari eum vel blandit notare quarta. Autem processus
                        lectores augue iriure facit. Volutpat aliquip erat
                        imperdiet ipsum tation. Typi luptatum ut
                        demonstraverunt eros quam. Ut clari consectetuer
                        tincidunt liber qui. 
                    </p>
                    <p>
                        Modo vel facilisis qui liber est. Eorum Investigationes
                        processus adipiscing commodo ea. Id iis claritatem vero
                        ea consequat.
                    </p>
                    <a href="#" class="readmore">Read More</a>
                </div><!-- End cs_article -->

                <div class="cs_article">
                    <h2> <a href="#">Article Number Four</a> </h2>
                    <a href="#">
                        <img src="images/article04.jpg"
                            alt="Artist's interpretation of article headline" />
                    </a>
                    <p>
                        Iis nostrud claritas quis sed qui. Ut nunc facilisi
                        claritatem quinta sit. Assum ii liber diam zzril nobis.
                        Qui nibh delenit fiant te illum. Delenit claritas ut
                        exerci eros typi. 
                    </p>
                    <p>
                        Videntur vel euismod ut eleifend quis. Nobis aliquam
                        nunc vero blandit illum. Lius placerat litterarum
                        processus quam legere. Accumsan modo non at congue
                        duis. Odio duis ut blandit feugait in. 
                    </p>
                    <a href="#" class="readmore">Read More</a>
                </div><!-- End cs_article -->

            </div><!-- End cs_slider -->
        </div><!-- End cs_wrapper -->
    </div><!-- End contentslider -->

    <h2> Content Slider Version 2 </h2>
    <p>
        This content slider was implemented with the following code:
    </p>

$（函数（）{
    $('#two').ContentSlider({
        宽度：'600px'，
        高度：'266px'，
        速度：400，
        缓动 : 'easeOutQuad',
        文本调整大小：真
    });
});

    <div id="two" class="contentslider">
        <div class="cs_wrapper">
            <div class="cs_slider">

                <div class="cs_article">
                    <h2> <a href="#">Article Number One</a> </h2>
                    <a href="#">
                        <img src="images/article01.jpg"
                            alt="Artist's interpretation of article headline" />
                    </a>
                    <p>
                        Hendrerit tincidunt vero vel eorum claritatem. Soluta
                        legunt quod qui dolore typi. Vel dolore soluta qui odio
                        non. Sollemnes minim eorum feugiat nihil nobis. Gothica
                        dolor in legentis nihil quinta.
                    </p>
                    <p>
                        Iriure parum autem putamus lectores duis. Quam sit quis
                        me me zzril. Facer etiam in lectores hendrerit etiam.
                        Exerci lorem liber tincidunt nostrud decima. Mutationem
                        est zzril ipsum facer nobis.
                    </p>
                    <a href="#" class="readmore">Read More</a>
                </div><!-- End cs_article -->

                <div class="cs_article">
                    <h2> <a href="#">Article Number Two</a> </h2>
                    <a href="#">
                        <img src="images/article02.jpg"
                            alt="Artist's interpretation of article headline" />
                    </a>
                    <p>
                        Nibh nihil et ex accumsan insitam. Qui lius congue
                        hendrerit quam vero. Demonstraverunt molestie ipsum
                        magna nobis sequitur. Ex diam euismod quis ii velit.
                    </p>
                    <p>
                        In quam lectores placerat Investigationes illum. Diam
                        sollemnes nihil lorem claram consectetuer. Eros nam
                        placerat claritas claritatem congue. Adipiscing ut
                        clari suscipit nulla habent.
                    </p>
                    <a href="#" class="readmore">Read More</a>
                </div><!-- End cs_article -->

                <div class="cs_article">
                    <h2> <a href="#">Article Number Three</a> </h2>
                    <a href="#">
                        <img src="images/article03.jpg"
                            alt="Artist's interpretation of article headline" />
                    </a>
                    <p>
                        Clari eum vel blandit notare quarta. Autem processus
                        lectores augue iriure facit. Volutpat aliquip erat
                        imperdiet ipsum tation. Typi luptatum ut
                        demonstraverunt eros quam. Ut clari consectetuer
                        tincidunt liber qui. 
                    </p>
                    <p>
                        Modo vel facilisis qui liber est. Eorum Investigationes
                        processus adipiscing commodo ea. Id iis claritatem vero
                        ea consequat.
                    </p>
                    <a href="#" class="readmore">Read More</a>
                </div><!-- End cs_article -->

                <div class="cs_article">
                    <h2> <a href="#">Article Number Four</a> </h2>
                    <a href="#">
                        <img src="images/article04.jpg"
                            alt="Artist's interpretation of article headline" />
                    </a>
                    <p>
                        Iis nostrud claritas quis sed qui. Ut nunc facilisi
                        claritatem quinta sit. Assum ii liber diam zzril nobis.
                        Qui nibh delenit fiant te illum. Delenit claritas ut
                        exerci eros typi. 
                    </p>
                    <p>
                        Videntur vel euismod ut eleifend quis. Nobis aliquam
                        nunc vero blandit illum. Lius placerat litterarum
                        processus quam legere. Accumsan modo non at congue
                        duis. Odio duis ut blandit feugait in. 
                    </p>
                    <a href="#" class="readmore">Read More</a>
                </div><!-- End cs_article -->

            </div><!-- End cs_slider -->
        </div><!-- End cs_wrapper -->
    </div><!-- End contentslider -->

    <p class="footer">
        All Content &copy; 2009 Ennui Design | <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a>
    </p>
    <!-- Site JavaScript -->
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jscript.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#one').ContentSlider({
                width : '900px',
                height : '400px',
                speed : 800,
                easing : 'easeInOutBack'
            });
        });
        $(function() {
            $('#two').ContentSlider({
                width : '600px',
                height : '266px',
                speed : 400,
                easing : 'easeOutQuad',
                textResize : true
            });
        });
    </script>
    <script src="js/jquery.chili-2.2.js" type="text/javascript"></script>
    <script src="js/chili/recipes.js" type="text/javascript"></script>

</body>

当它到达最后一张幻灯片时，我什至无法单击上一个按钮。

Answer 1

首先，使用setInterval是一个坏主意。这是我建议您使用的两个函数和一个基本实现。

$(function() {
    //initiate ContentSlider 
    $('#one').ContentSlider({
        width : '900px',
        height : '400px',
        speed : 800,
        easing : 'easeInOutBack'
    });

    //get total number of slides and create a variable to count
    //please note that this is only for one slider, not two on the same page
    var total = $('.cs_article').length,
    i = 1;

    //create an event handler to initiate the automation
    $('#auto_btn').click(function(){ clickRight(); });
    $('#stop').click(function(){  clearTimeout(t); });

    //the functions
    function clickRight() {
        i++;
        $('.cs_rightBtn').trigger('click');
        if (i!=total){
            var t = setTimeout(function(){clickRight()},3000);
        }
        if (i==total){
            clickLeft();
        }
    }
    function clickLeft(){
        i--;
        $('.cs_leftBtn').trigger('click');
        if (i>=1){
            var t = setTimeout(function(){clickLeft()},3000);
        }
        if (i<1){
            clickRight();
        }
    }

});

我希望这对你来说是一个很好的垫脚石。您可能想要稍微更改功能，目前它只是在所有幻灯片中不断滑动。此外，不要只是复制和粘贴，阅读代码并理解它，以便您可以根据需要手动定制它。