0

这是我的JsFiddle

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

任何人都可以指导我如何实现这一目标。

查询：

$(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);
});
4

4 回答 4

2

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

你做画廊的方式是完全错误的。你有一个非常敏感的 CSS 充满了margin错误（见 CSS 代码），
你手动计算，如果你要添加图像，改变宽度等，这会让你的生活变得复杂
...... 你的按钮定位真的错误地，您甚至不需要在 HTML 中手动添加它们。让 jQuery 为您完成所有工作：

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

现场演示

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

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：

在您的代码中， usingdisplay: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 中即可播放，无需再查看您的后院 :)

于 2013-09-01T08:35:54.557 回答
0

给你：http: //jsfiddle.net/pjvCw/41/

我添加了新课程

.selected
{
    background-color: red;
}

并修改了一些js代码

于 2013-09-01T07:31:14.297 回答
0

这是您编辑的 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;
}
于 2013-09-01T07:33:15.170 回答
0

试试这个：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应用该类的第一个圆圈进行初始化。

于 2013-09-01T08:07:29.440 回答