1

ラッパー div の両側にある「左」ボタンと「右」ボタンで制御されるスライド div モジュールを作成しようとしていますが、最善の方法を見つけるのに苦労しています。

このモジュールの HTML 構造は次のようになります。

<div class="wrapper">
                <div class="scrollLeft">
                    <span>Left</span>
                </div>
                <div class="scrollingDivs">
                    <div class="scrollThis">Some content</div>
                    <div class="scrollThis">different content</div>
                    <div class="scrollThis">more content</div>
                    <div class="scrollThis">even more content</div>
                    <div class="scrollThis">and more content</div>
                </div>
                <div class="scrollRight">
                    <span>Right</span>
                </div>  
            </div>

対応する CSS は次のようになります。

.wrapper{
width: 720px;
float: left;
height: 146px;
position: relative;
}
.scrollLeft, .scrollRight{
display: inline-block;
width: 20px;
height: 130px;
text-indent: -99999px;
cursor: pointer;
}
.scrollLeft{
background: url('../img/left.png') no-repeat;
float: left;
margin-right: 16px;
}
.scrollRight{
background: url('../img/right.png') no-repeat;
float: right;
}
.scrollLeft:hover{
background: url('../img/left-hl.png') no-repeat;
}
.scrollRight:hover{
background: url('../img/right-hl.png') no-repeat;
}
.scrollingDivs{
width: 672px;
margin-left: 28px;
position: absolute;
margin-top: 5px;
overflow: hidden;
height: 146px;
}
.scrollThis{
display: inline-block;
background: #fff;
border: 1px solid rgba(65,65,66,0.3);
border-top: 0;
border-bottom: 0;
width: 160px;
height: 140px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
margin-right: 0;
margin-left: -8px;
line-height: 16px;
left: 0;
}

もう少しありますが、それが基本的な要点です。

したがって、scrollLeft がクリックされると、scrollThis div がわずかに透明になり、左に移動する必要があります。理想的には、スクロールされたdivがどちらかの端にある場合、代わりに別の効果が発生することを確認することもできます(おそらくscrollLeft矢印が光るなど)。

そのため、私はこのために JQuery を使い始めましたが、実際にそれらを動かす方法についての初期の問題に遭遇しました。これがすべて設定されている方法のため、left-=50 でアニメーションを実行してもうまくいかないようです。これまでのところ、私が持っているものは次のとおりですが、現時点ではせいぜい初歩的なものです。これは、「左クリック」部分でのテストです。

  <script>
$(document).ready(function(){
    $('.scrollLeft').click(function(){
        $('.scrollThis').animate({
            opacity: '0.25',
            left: '-=50'
            }, 500, 'linear', function(){});    
        });
    });
  </script>

私のテストでは、不透明度がフェードし、はい、div はすべて左のプロパティに -=50 を受け取りますが、移動しません。目的の効果を得るには、JS または CSS をどのように構成すればよいですか?

ありがとう

4

3 に答える 3

0

このための素晴らしいプラグインを見つけました-jCarousel。かなり重いスキニングが必要でしたが、美しく機能させるために私の部分から少しカスタマイズしました。http://sorgalla.com/jcarousel/

于 2012-10-19T17:23:09.537 に答える
0

コンテナをアニメーション化するとどうなりますか? それは物事を動かすようです：

$('.scrollingDivs').animate({
于 2012-10-19T01:01:56.640 に答える
0

私はすべて学習に賛成ですが、このようなものを利用できるのに、なぜ車輪を再発明するのでしょうか?

Cycle Plugin は非常に柔軟で、必要なことすべてに加えて、さらに多くのことを行うことができます。

http://jquery.malsup.com/cycle/

于 2012-10-19T01:14:52.450 に答える