Question

我只想在无限旋转木马中一次滚动一个徽标。以下是我的代码。任何帮助，将不胜感激。我尝试将singleWidth定义为190px，这是徽标的大小。虽然我仍然不知道如何在末尾划分负空间以创建循环效果。

      <html>
      <head>
      <style type="text/css" media="screen">
      .infiniteCarousel {
      position: relative;
      width: 1354px;
      }

      .infiniteCarousel .carousel_wrapper {
      width: 1354px;
      overflow: auto;
      height: 162px;
      margin: 0 auto;
      top: 0;
      }

      .infiniteCarousel ._carousel_wrapper ul {
      width: 1252px; /* single item * n */
      list-style-image:none;
      list-style-position:outside;
      list-style-type:none;
      margin:0;
      padding:0;
      top: 0;
      }

      .infiniteCarousel ul li {
      display:block;
      float:left;
      padding: 10px;
      height: 162px;
      width: 190px;
      }

      .infiniteCarousel .arrow {
      display: block;
      height: 18px;
      width: 19px;
      background: url(hospitality_img/right_arrow.png) no-repeat 0 0;
      text-indent: -999px;
      position: absolute;
      top: 100px;
      cursor: pointer;
      outline: 0;
      right: 0;
      }

      .infiniteCarousel .forward {
      background-position: 0 0;
      right: 0;
      }

      .infiniteCarousel .back {
      display: block;
      height: 18px;
      width: 19px;
      background: url(hospitality_img/left_arrow.png) no-repeat 0 0;
      text-indent: -999px;
      position: absolute;
      top: 100px;
      cursor: pointer;
      outline: 0;
      left: 0;
      }
      </style>


      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
       <script type="text/javascript" charset="utf-8">
      (function () {
       $.fn.infiniteCarousel = function () {
       function repeat(str, n) {
        return new Array( n + 1 ).join(str);
        }

         return this.each(function () {
        // magic!
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul').width(9999),
            $items = $slider.find('> li'),
            $single = $items.filter(':first')

            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth),
            currentPage = 1,
            pages = Math.ceil($items.length / visible);

        /* TASKS */

        // 1. pad the pages with empty element if required
        if ($items.length % visible != 0) {
            // pad
        $slider.append(repeat('<li class="empty" />', visible - ($items.length %      visible)));
            $items = $slider.find('> li');
        }

        // 2. create the carousel padding on left and right (cloned)
        $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li');

        // 3. reset scroll
        $wrapper.scrollLeft(singleWidth * visible);

        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;

            $wrapper.filter(':not(:animated)').animate({//'margin-left':'-=190px'
                scrollLeft : '+=' + left
            }, 500, function () {
                // if page == last page - then reset position
                if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    page = 1;
                } else if (page == 0) {
                    page = pages;
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                }

                currentPage = page;
            });
        }

        // 5. insert the back and forward link
        $wrapper.after('<a href="infinite-carousel-loop.html#" class="arrow back"></a><a href="infinite-carousel-loop.html#" class="arrow forward"></a>');

        // 6. bind the back and forward links
        $('a.back', this).click(function () {
            gotoPage(currentPage - 1);
            return false;
        });

        $('a.forward', this).click(function () {
            gotoPage(currentPage + 1);
            return false;
        });

        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });

        // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
        $(this).bind('next', function () {
            gotoPage(currentPage + 1);
        });
        });
        };
        })(jQuery);

        $(document).ready(function () {
        // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
        var autoscrolling = true;

       $('.infiniteCarousel').infiniteCarousel().mouseover(function () {
       autoscrolling = false;
       }).mouseout(function () {
       autoscrolling = true;
       });

      setInterval(function () {
        if (autoscrolling) {
        $('.infiniteCarousel').trigger('next');
       }
       }, 2000);
       });
       </head>
       <body>

       <div class="infiniteCarousel">
       <div class="carousel_wrapper">
       <ul>
       <li><img src="hospitality_img/hyatt_union.png" alt="Hyatt Union Square New York" /></li>
       <li><img src="hospitality_img/the_ritz.png" alt="The Ritz-Carlton Dubai" /></li>
       <li><img src="hospitality_img/aman.png" alt="Aman Resorts" /></li>
       <li><img src="hospitality_img/caesars.png" alt="Caesars Entertainment" /></li>
       <li><img src="hospitality_img/lvmh.png" alt="LVMH Moet Hennessy Louis Vuitton" /></li>
       <li><img src="hospitality_img/palms.png" alt="Palms Las Vegas" /></li>
       </ul>        
       </div>
       </div>
       </body>
       </html>

Answer 1

好的，我花了几个小时倾注代码，似乎它被写入同时获取所有图标并在屏幕上运行它们。我试图修改代码只是抓住一个图标，但这是一个非常难看的kludge。所以我重新编写代码的方式是你可以在div中放置任意数量的图标，改变它在屏幕上花费的时间并随时停止。

这是FIDDLE。

它可能不适合你，但它很有趣，我学到了很多。

JS

var divwidth = $('.sliderdiv').width();
var firstmove = (divwidth * 0.5);
var firsttime = 600;
var lagtime = 1200;
var secondmove = (divwidth * 0.5)-50;
var secondtime = 600;
var numberimg = $('.holder img').length;
var n = 0;
animate( n );

$('#stopme').click(function(){
      $( '.sliderdiv img' ).stop(true);
});

function animate( n )
{
  var $moveimage = $('.holder img');
  $( $moveimage[n] ).clone().appendTo('.sliderdiv');
  var $slideimage = $('.sliderdiv img');  
  $( $slideimage ).animate(
                     { left: '+=' + firstmove }, firsttime,
             function() {
                         $( $slideimage ).animate(
                                            { left: '+=1' }, 
                                             lagtime,
             function() {
                         $( $slideimage ).animate(
                                            { left: '+=' + secondmove }, 
                                            secondtime,
             function()  {
                           $('.sliderdiv').html('');
                           n = n + 1;
                           if(n > numberimg - 1){ n = 0; }
                           animate( n );
                          }
                                             );}
                                             );}
                      );
}

我只想在无限旋转木马中一次滚动一个徽标

1 个答案: