0

ここに私のJsFiddleがあります

ウィンドウがスライドしたときに背景色の変更プロパティを円に適用したい。最初と同じように、最初の円だけが背景色になります。画像が 2 番目の画面にスライドすると、2 番目の円には色のみが表示されます。

誰でもそれを達成する方法を教えてもらえますか?

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);
});
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:

コードでは、使用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 に自由に追加して再生するだけで、もう裏庭を見る必要はありません :)

于 2013-09-01T08:35:54.557 に答える