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个bug（参见CSS代码），
您手动计算，如果您要添加图片，更改宽度等，这将只会复杂化您的生活... 您的按钮定位错误，您甚至不需要在HTML中手动添加它们。让jQuery为你完成所有工作：

计算边距，宽度，
获取幻灯片数量
生成按钮，
点击您的按钮
在mouseenter上暂停图库（在mouseleave上再次循环）

<强> LIVE DEMO

这是你应该使用滑块的方式：

<强> 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;即可消除此不便之处一旦我这样做，数学运算正确，宽度大于340px，图像边框为5px，边距为20px。

.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中并播放，再也不用再看看您的后院了：）

Answer 2

在这里：http://jsfiddle.net/pjvCw/41/

我添加了新课程

.selected
{
    background-color: red;
}

并修改了一些js代码

Answer 3

以下是您的jsfiddle编辑http://jsfiddle.net/pjvCw/45/

var scrolled = 0;
var circles = $(".circle");
var colorCircle = function(index) {
    for(var i=0; i<circles.length; i++) {
        if(i == index) {
            circles.eq(i).css("background-color", "rgba(255, 0, 0, 1)");
        } else {
            circles.eq(i).css("background-color", "rgba(255, 0, 0, 0)");
        }
    }
}
$(document).ready(function () {
    setInterval(function () {
        var A = $('.gallery').scrollLeft();
        if (A < 993) {
            $('.gallery').animate({
                scrollLeft: '+=331px'
            }, 300);
            colorCircle(++scrolled);
        }
        if (A >= 993) {
            $('.gallery').delay(400).animate({
                scrollLeft: 0
            }, 300);
            colorCircle(scrolled = 0);
        }
    }, 3000);
    colorCircle(0);
});

我添加了一个转换到.circle类，所以看起来好一点：

.circle {
  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-right: 5px;
  transition: background-color 700ms;
  -webkit-transition: background-color 700ms;
}

Answer 4

试试这个：http://jsfiddle.net/yerdW/1/

我添加了一行获取scrollLeft并将其除以宽度（331px）以获取位置并使用它来选择“活动”圆圈：

      $(".circle").removeClass("coloured");        
       position = Math.ceil($(".gallery").scrollLeft()/331 + 2);

    if(position > $(".circle").length){
        position = 1; // yes...
    }
        $(".content-nav-control div:nth-child("+position+")").addClass("coloured");

活动圈的红色背景：

    .coloured {
    background : red;
    }

请注意，您应该使用已应用.coloured类的第一个圆圈初始化。

基于滚动内容应用背景颜色

4 个答案: