javascript - 根据滚动内容应用背景颜色

Question

这是我的 JsFiddle

我想在窗口滑动时将背景颜色更改属性应用于圆圈。就像一开始只有第一个圆圈会有背景色。当图像滑到第二个屏幕时，第二个圆圈将只有颜色。

谁能指导我如何实现这一目标。

JQuery:

$(document).ready(function () {
    setInterval(function () {
        var A = $('.gallery').scrollLeft();
        if (A < 993) {
            $('.gallery').animate({
                scrollLeft: '+=331px'
            }, 300);
        }
        if (A >= 993) {
            $('.gallery').delay(400).animate({
                scrollLeft: 0
            }, 300);
        }
    }, 3000);
});

Answer 1

这是您问题的简单解决方案:http://jsfiddle.net/pjvCw/44/但是……

你做画廊的方式是完全错误的。 你有一个非常敏感的 CSS，充满了 margin 错误(参见 CSS 代码)，
你全靠手工计算，如果你要添加图片、改变宽度等，有一天这只会你的生活...
您的按钮位置确实错误，而且您甚至不需要手动将它们添加到您的 HTML 中。让 jQuery 为您完成所有工作:

• 计算边距、宽度，
• 获取幻灯片的数量
• 生成按钮，
• 让你的按钮可以点击
• 在 mouseenter 时暂停画廊(在 mouseleave 时再次循环)

LIVE DEMO

这是您应该使用 slider 的方式:

HTML:

<div class="galleryContainer"> <!-- Note this main 'wrapper' -->

  <div class="gallery">
      <div class="row">
        <!-- ..your images.. -->
      </div>
      <div class="row">
        <!-- ..your images.. -->
      </div>    
  </div>
  <div class="content-nav-control"></div>    <!-- Let jQ create the buttons -->

</div>

请注意通用图库包装器，它允许您使用此 CSS 使您的按钮父按钮不随图库移动。

CSS:

在您的代码中，使用 display:inline-block; 会为您的元素添加 4px 边距，从而破坏您的计算。所以你只需要应用 font-size:0; 来消除这种不便。
一旦我这样做了，数学就起作用了，正确的宽度小于 340 像素，图像边框为 5 像素，边距为 20 像素。

.galleryContainer{ 
  /* you need that one 
  // to prevent the navigation move */
  position:relative; /* cause .content-nav-control is absolute */
  background-color: #abcdef;
  width:340px; /* (instead of 350) now the math will work */
  height: 265px; 
}
.gallery{
   position:relative;
   overflow: hidden; /* "overflow" is enough */
   width:340px; /* (instead of 350) now the math will work */
   height: 265px; 
}

.gallery .row {
    white-space: nowrap;
    font-size:0; /* prevent inline-block 4px margin issue */
}
.gallery img {
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}
.normalimage {
    height: 80px;
    width: 50px;
    border: 5px solid black;
}
.wideimage {
    height: 80px;
    width: 130px;
    border: 5px solid black;
}
img:last-of-type {
    margin-right:20px;
}
.content-nav-control {
  position: absolute;
  width:100%; /* cause it's absolute */
  bottom:10px;
  text-align:center; /* cause of inline-block buttons inside*/
  font-size:0; /* same trick as above */
}
.content-nav-control > span {
  cursor:pointer;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  border:1px solid #000;
  box-shadow: inset 0 0 6px 2px rgba(0,0,0,.75);
  margin: 0 2px; /* BOTH MARGINS LEFT AND RIGHT */
}
.content-nav-control > span.active{
    background:blue;
}

最后:

$(function () { // DOM ready shorty

    var $gal  = $('.gallery'),
        $nav  = $('.content-nav-control'),
        galSW = $gal[0].scrollWidth,       // scrollable width
        imgM  = parseInt($gal.find('img').css('marginLeft'), 10), // 20px
        galW  = $gal.width() - imgM,      // - one Margin
        n     = Math.round(galSW/galW),   // n of slides
        c     = 0,   // counter
        galIntv;     // the interval

    for(var i=0; i<n; i++){
        $nav.append('<span />'); // Create circles
    }
    var  $btn = $nav.find('span');
    $btn.eq(c).addClass('active');

    function anim(){
        $btn.removeClass('active').eq(c).addClass('active');
        $gal.stop().animate({scrollLeft: galW*c }, 400);
    }

    function loop(){
        galIntv =  setInterval(function(){
            c = ++c%n;
            anim();
        }, 3000);
    }
    loop(); // first start kick

    // MAKE BUTTONS CLICKABLE
    $nav.on('click', 'span', function(){
       c = $(this).index();
       anim();
    });

    // PAUSE ON GALLERY MOUSEENTER
    $gal.parent('.galleryContainer').hover(function( e ){
        return e.type=='mouseenter' ? clearInterval(galIntv) : loop() ;
    });


});

“- 有了这个解决方案，我现在和将来能做什么？-”
没什么!只需将图像自由添加到您的 HTML 中并播放，再也不用看您的后院了:)