1

我正在尝试在 Twitter Bootstrap 中制作第二个轮播（带有解决方案和所有内容以及更改背景颜色），如下所示：- http://solutions.mckinsey.com/index/

我不确定如何处理背景更改部分。你们能帮我吗？

这就是我对当前轮播所做的：-

<div class="personalized-carousel-module media-module">


            <div id="myCarouselforthis" class="carousel slide">
              <div class="carousel-inner carousel-inner-at-home">


                <div class="item active" id="home-carousel-inner">
                  <a href="/myfirstlink/index.html">
                        <div class="some-class"></div>
                        <span>Title</span>
                    </a>

                </div>
                <div class="item">
                      <a href="/myfirstlink2/index.html">
                        <div class="some-class2"></div>
                        <span>Title2</span>
                    </a>
                </div>
                <div class="item">
                  <img src="media/sample-image.jpg" alt="">

                </div>
              </div>
              <a class="arrow arrow-left hidden-phone" href="#myCarouselforthis" data-slide="prev"></a>
              <a class="arrow arrow-right hidden-phone" href="#myCarouselforthis" data-slide="next"></a>
            </div>



        </div>

编辑

在查看代码时，我意识到它是通过<div class="solution-preview" value="primary-two-background">. 谁能解释一下，valuediv 的元素如何使它改变颜色？

    <ul>
        <li>
            <div class="solution-preview" value="primary-two-background">
                <a href="/Index/solutions/periscope/">
                    <h2>Periscope</h2>
                </a>
                <p>
Improves return on sales through better pricing, promotions, assortment, and performance management </p>
            </div>
        </li>
        <li>
            <div class="solution-preview" value="primary-five-background">
                <a href="/Index/solutions/objective-health/">
                    <h2>Objective Health</h2>
                </a>
                <p>
Supports community hospitals and small regional systems to improve their cost performance and strategy </p>
            </div>
        </li>

工作完成至今

因此，通过使用来自同一站点的 CSS 和 JS 进行学习，我做了以下事情：-

<div class="module colored home-solutions primary-two-background">


            <div id="myCarouselforsolutions" class="carousel slide">
              <div class="carousel-inner carousel-inner-at-home">


                   <div class="content-container">

                        <h1 id="num-solutions"></h1>
                        <h2>SOLUTIONS</h2>
                        <div id="swipe-container-home-solutions">

                            <div class="item active" id="solutions-slide-dimensions">

                                <div class="solution-preview" value="primary-two-background">
                                    <a href="/Index/solutions/periscope/">
                                        <h2>Periscope</h2>
                                    </a>
                                    <p>
                                        Improves return on sales through better pricing, promotions, assortment, and performance management </p>
                                </div>

                            </div>

                             <div class="item" id="solutions-slide-dimensions">

                                <div class="solution-preview" value="primary-five-background">
                                    <a href="/Index/solutions/objective-health/">
                                        <h2>Objective Health</h2>
                                    </a>
                                    <p> Supports community hospitals and small regional systems to improve their cost performance and strategy</p>
                                </div>

                            </div>



                        </div>

                  </div>



              </div>
              <a class="arrow arrow-left hidden-phone" href="#myCarouselforsolutions" data-slide="prev"></a>
              <a class="arrow arrow-right hidden-phone" href="#myCarouselforsolutions" data-slide="next"></a>
            </div>



        </div>

问题是它的布局看起来确实不错，但轮播的滑块不起作用......我无法弄清楚。

解决方案

做了这样的事情：-

所以我做了这样的事情： -

$('#myCarouselforsolutions').carousel({
          interval: 3000
        });

        var slideFrom;
        var slideTo;
        $('#myCarouselforsolutions').on('slide',function(e){
            slideFrom = $(this).find('.active').index();
            slideTo = $(e.relatedTarget).index();


            if (typeof slideTo == "undefined") {
                slideTo = 2;
            }
            //console.log ("slide To " + slideTo + " and From " + slideFrom);
            $('.media-module').removeClass('primary-one-background')
                                .removeClass('primary-two-background')
                                .removeClass('primary-three-background')
                                .removeClass('primary-four-background')
                                .removeClass('primary-five-background')
                                .addClass($(solution_list[slideTo]).attr('value'));
            });



            $("#prev-solution, #next-solution").click(function(e) {
                //e.preventDefault();


        });

我唯一想要实现的就是让它滑动而不是淡出，淡入（在 IE 中）。谢谢。

4

1 回答 1

1

所以背景颜色是通过以下 div 的 CSS 属性改变的。

<div class="module colored home-solutions primary-one-background">

上面的 div 正在primary-*-background更新类，其中 * = '一'或'二'或'三'或'四'或'五'。

CSS 正在通过文件中的 Javascript 更新：http: //solutions.mckinsey.com/Index/scripts/main.js

相关的JS如下：

function updateBackground (pos) {
    $('.home-solutions').removeClass('primary-one-background')
        .removeClass('primary-two-background')
        .removeClass('primary-three-background')
        .removeClass('primary-four-background')
        .removeClass('primary-five-background')
        .addClass($(solution_list[pos]).attr('value'));
....

它primary-*-background从所有具有类的 div 元素中删除home-solutions，然后primary-*-background根据 的值将类添加回那些 div 元素pos。

value您指出的那个实际上是由上面的JS使用的。

...
.addClass($(solution_list[pos]).attr('value'));

以上是从您列出的 div 元素中获取值，并将该值用作添加到home-solutionsdiv 元素的类。

于 2013-06-27T18:43:14.847 回答