javascript - 无法正确滑动

Question

所以这是我的带有视频播放列表的小 HTML 页面：

http://jsfiddle.net/VvR4H/3/

如您所见，在灰色区域中，我有一个内嵌的播放列表列表，现在有三个：

• 袋鼠格斗
• 澳大利亚体育
• 真正的足球

每个播放列表下都列出了视频。

我想要实现的是我的播放列表之间的一个很好的水平滚动。现在，当您单击灰色播放列表栏的左角或右上角（文本被切掉一半）时，它将滑动到另一个播放列表。

但是滑动不是很好。我希望当你点击左上角时，袋鼠格斗会在播放列表栏的中间滑动，你能帮帮我吗？

这是我的 HTML：

<div class="container">
    <ul class="playlists">
        <li class="playlist">
            <div class="title"> <span class="move-left">Real Foorball</span>
 <span>Kangaroo Fighting</span>
 <span class="move-right">Australian Sports</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 C</li>
                <li class="video">Video 2 C</li>
                <li class="video">Video 3 C</li>
            </ul>
        </li>
        <li class="playlist">
            <div class="title"> <span class="move-left">Kangaroo Fighting</span>
 <span>Australian Sports</span>
 <span class="move-right">Real Football</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 A</li>
                <li class="video">Video 2 A</li>
                <li class="video">Video 3 A</li>
            </ul>
        </li>
        <li class="playlist">
            <div class="title"> <span class="move-left">Australian Sports</span>
 <span>Real Football</span>
 <span class="move-right">Kangaroo Fighting</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 B</li>
                <li class="video">Video 2 B</li>
                <li class="video">Video 3 B</li>
            </ul>
        </li>
    </ul>
</div>

我的 CSS：

ul li {
    list-style: none;
}
.container {
    position: relative;
    background: #000;
    width: 300px;
    height: 500px;
    overflow: hidden;
    font-family: sans-serif;
}
ul.playlists {
    width: 1200px;
    padding-left: 0;
    margin-top: 0;
    position: absolute;
    left: -300px;
}
ul.playlists li {
    float: left;
    width: 300px;
    height: 50px;
}
ul.playlists li.playlist .title {
    width: 100%;
    background: grey;
    color: white;
    line-height: 50px;
    text-align: center;
}
ul.playlists li.playlist .title .move-left, ul.playlists li.playlist .title .move-right {
    width: 30px;
    line-height: 50px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
ul.playlists li.playlist .title .move-left {
    float: left;
    direction: rtl;
}
ul.playlists li.playlist .title .move-right {
    float: right;
}
ul.videos {
    clear: both;
    padding-left: 0;
}
ul.videos li {
    float: left;
    width: 250px;
    height: 50px;
    padding: 25px;
    color: white;
    background: blue;
    border-top: 1px solid black;
}

还有我的 JavaScript：

$(".move-left").click(function () {
    $(this).parent().parent().parent().animate({
        "left": "0"
    }, 500, "linear", function () {
        console.log("yay");
    });
});

$(".move-right").click(function () {
    $(this).parent().parent().parent().animate({
        "left": "-600"
    }, 500, "linear", function () {
        console.log("yay");
    });
});

Answer 1

它不完整（我没有做无限循环），但我想它有你要求的更好的动画。

我将您的 html 分成两部分。第一个比第二个移动得慢。所以你可以看到下一个标题的一半文本，但你不必复制文本。

http://jsfiddle.net/VvR4H/10/

html

<div class="container">
    <div class="title-wrapper">
            <div class="title"> 
                <span>Real Foorball</span>
                <span>Kengoroo Fighting</span>
                <span>Australian Sports</span>
            </div>
    </div>


    <div class="playlist">
            <ul class="videos">
                <li class="video">Video 1 C</li>
                <li class="video">Video 2 C</li>
                <li class="video">Video 3 C</li>
            </ul>
            <ul class="videos">
                <li class="video">Video 1 A</li>
                <li class="video">Video 2 A</li>
                <li class="video">Video 3 A</li>
            </ul>
            <ul class="videos">
                <li class="video">Video 1 B</li>
                <li class="video">Video 2 B</li>
                <li class="video">Video 3 B</li>
            </ul>
        </div>
</div>

css

    ul li {
    list-style: none;
}

.container {
    position: relative;
    background: #000;
    width: 300px;
    height: 500px;
    font-family: sans-serif;
    overflow: hidden;
}

div.title-wrapper {
    background: grey;
    height: 50px;
}

div.title {
    position: absolute;
    overflow: hidden;
    height: 50px;
    left: 75px;
    white-space: nowrap;
}

div.playlist {
    position: absolute;
    overflow: hidden;
    top: 50px;
    clear: both;
    white-space: nowrap;
}
div.title span {
    width: 300px;
    background: grey;
    color: white;
    line-height: 50px;
    text-align: left;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    text-indent: 20px;
}

ul.videos {
    float: left;    
    width: 300px;
    margin: 0;
    padding: 0;
}

ul.videos li {
    display: block;
    background: blue;
    height: 50px;
    padding: 10px 20px;
    margin: 1px 0 0 0;
    color: white;
}

javascript

$('.title span').css({
    'text-indent' : '0', 
    'text-align' : 'center', 
    'width' : '150px'
});

var titles = [];
$('.title span').each( function () {
    titles.push($(this));
});

var max = titles.length-1;
var left = max;
var right = 1;

$('.title span').click(function () {
    console.log($(this).context.innerText + '   left: ' +titles[left].context.innerText + '   right: ' +titles[right].context.innerText)
    if($(this).context==titles[left].context) {
        left = (left==0) ? max : --left;
        right = (right==0) ? max : --right;
        $('.title').animate({
            "left": "+=150px"
        }, 500);
        $('.playlist').animate({
            "left": "+=300px"
        }, 500);
    } 
    if($(this).context==titles[right].context) {
        left = (left==max) ? 0 : ++left;
        right = (right==max) ? 0 : ++right;
        $('.title').animate({
            "left": "-=150px"
        }, 500);
        $('.playlist').animate({
            "left": "-=300px"
        }, 500);
    }
});