Question

我正在尝试制作一个滑动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以获得所需的效果？

由于

Answer 1

如果您为容器设置动画，该怎么办？它似乎让事情发生了变化：

$('.scrollingDivs').animate({

Answer 2

我全都是为了学习，但为什么在你可以利用这样的东西时重新发明轮子呢？

Cycle Plugin非常灵活，可以做任何你想做的事情。

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

Answer 3

我找到了一个很棒的插件 - jCarousel。它需要一些非常厚重的皮肤，但我的部分是为了让它工作得很漂亮。 http://sorgalla.com/jcarousel/

在JQuery中滑动水平div

3 个答案: