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

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

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

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

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

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

于 2012-10-19T01:14:52.450 回答
0

我为此找到了一个很棒的插件 - jCarousel。它需要一些相当厚重的蒙皮，但我的部分需要进行一些小的定制才能让它完美地工作。http://sorgalla.com/jcarousel/

于 2012-10-19T17:23:09.537 回答