Question

我正在努力将网站从JOOMLA移开并使用MVC 4.0进行复制。主页的一部分包括一个小滑块，每三秒钟“滑动”赞助商徽标。在研究的过程中，我发现了几个优秀的jQuery滑块，但没有一个能够在滑块中包含多个图像（必须手动创建5个赞助商徽标，放入一个图像中）。这是可行的，但将来我希望会员能够将他们的徽标上传到指定的文件夹。

我遇到了以下JSFIDDLE，它非常类似于我所追求的：JSFIDDLE 643

然而，对jQuery不熟悉，我似乎在使用代替彩色标签时遇到了问题。

enter image description here

所有赞助商都堆叠在一起，而不是按照我的意愿滑动。我相信这可能是我未能正确实现jQuery ......？

如果有人有任何想法，这是我的代码？最终将有近40个赞助商。每个徽标的宽度为150px，我试图在每个可见区域显示5个（JSFIDDLE有3个方块）。

Index.cshtml

    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/Scripts/jquery-1.9.1.min.js")
@Scripts.Render("~/Scripts/jquery.lbslider.js")

<script type="text/javascript">
 $(document).ready(function () {
      $('#slider').lbSlider({
           leftBtn: '#arrow-left', // left control selector
           rightBtn: '#arrow-right', // right control selector
           visible: 3, // visible elements quantity
           autoPlay: true, // autoscroll flag (default: false)
           autoPlayDelay: 5 // delay of autoscroll in seconds (default: 10)
      });
 });
</script>

                                                                 <h3>Our Valued Sponsors</h3>

<div class="slider-wrap">
     <div class="slider">
         <ul>
             <li>
                 <span><img src="1" alt="" /></span>
             </li>
             <li>
                 <span><img src="2" alt="" /></span>
             </li>
             <li>
                 <span><img src="3" alt="" /></span>
             </li>
             <li>
                 <span><img src="4" alt="" /></span>
             </li>
             <li>
                 <span><img src="5" alt="" /></span>
             </li>
             <li>
                 <span><img src="6" alt="" /></span>
             </li>
             <li>
                 <span><img src="7" alt="" /></span>
             </li>
             <li>
                 <span><img src=8" alt="" /></span>
             </li>
             <li>
                 <span><img src="9" alt="" /></span>
             </li>
             <li>
                 <span><img src="10" alt="" /></span>
             </li>
        </ul>
     </div>
     <a href="#" class="slider-arrow sa-left">&lt;</a>
     <a href="#" class="slider-arrow sa-right">&gt;</a>
</div>

的site.css

    .slider-wrap 
{
     position: relative;
     margin: 50px auto; 
     width: 950px;
}
.slider {
    position: relative;
    width: 890px;
    margin: auto;
    border: 5px solid black;
}
ul {
    margin: 0;
    padding:0;
}
ul li {
    list-style: none;
    text-align: center;
}
ul li span img {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background: black;
}

     ul li img {
          width: 150px;
          height: auto;
     }

.slider-arrow {
    position: absolute;
    top: 40px;
    width: 20px;
    height: 20px;
    background: black;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}

.sa-left {left: 10px;}
.sa-right {right: 10px;}

jquery.lbslider.js

(function ($) {
     $.fn.lbSlider = function (options) {
          var options = $.extend({
               leftBtn: '.leftBtn',
               rightBtn: '.rightBtn',
               visible: 3,
               autoPlay: false,  // true or false
               autoPlayDelay: 10  // delay in seconds
          }, options);
          var make = function () {
               $(this).css('overflow', 'hidden');

               var thisWidth = $(this).width();
               var mod = thisWidth % options.visible;
               if (mod) {
                    $(this).width(thisWidth - mod); // to prevent bugs while scrolling to the end of slider
               }

               var el = $(this).children('ul');
               el.css({
                    position: 'relative',
                    left: '0'
               });
               var leftBtn = $(options.leftBtn), rightBtn = $(options.rightBtn);

               var sliderFirst = el.children('li').slice(0, options.visible);
               var tmp = '';
               sliderFirst.each(function () {
                    tmp = tmp + '<li>' + $(this).html() + '</li>';
               });
               sliderFirst = tmp;
               var sliderLast = el.children('li').slice(-options.visible);
               tmp = '';
               sliderLast.each(function () {
                    tmp = tmp + '<li>' + $(this).html() + '</li>';
               });
               sliderLast = tmp;

               var elRealQuant = el.children('li').length;
               el.append(sliderFirst);
               el.prepend(sliderLast);
               var elWidth = el.width() / options.visible;
               el.children('li').css({
                    float: 'left',
                    width: elWidth
               });
               var elQuant = el.children('li').length;
               el.width(elWidth * elQuant);
               el.css('left', '-' + elWidth * options.visible + 'px');

               function disableButtons() {
                    leftBtn.addClass('inactive');
                    rightBtn.addClass('inactive');
               }
               function enableButtons() {
                    leftBtn.removeClass('inactive');
                    rightBtn.removeClass('inactive');
               }

               leftBtn.click(function (event) {
                    event.preventDefault();
                    if (!$(this).hasClass('inactive')) {
                         disableButtons();
                         el.animate({ left: '+=' + elWidth + 'px' }, 300,
                             function () {
                                  if ($(this).css('left') == '0px') { $(this).css('left', '-' + elWidth * elRealQuant + 'px'); }
                                  enableButtons();
                             }
                         );
                    }
                    return false;
               });

               rightBtn.click(function (event) {
                    event.preventDefault();
                    if (!$(this).hasClass('inactive')) {
                         disableButtons();
                         el.animate({ left: '-=' + elWidth + 'px' }, 300,
                             function () {
                                  if ($(this).css('left') == '-' + (elWidth * (options.visible + elRealQuant)) + 'px') { $(this).css('left', '-' + elWidth * options.visible + 'px'); }
                                  enableButtons();
                             }
                         );
                    }
                    return false;
               });

               if (options.autoPlay) {
                    function aPlay() {
                         rightBtn.click();
                         delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
                    }
                    var delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
                    el.hover(
                        function () {
                             clearTimeout(delId);
                        },
                        function () {
                             delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
                        }
                    );
               }
          };
          return this.each(make);
     };
})(jQuery);

编辑：感谢所有评论过的人。我最后做了一些小修改，然后使用Twitter Bootstrap - Carousel.js。

如何用图像实现jQuery滑块？

0 个答案: