Javascript 很难使这个滑动正确

下面是我的小HTML页面，其中包含视频播放列表：

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

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

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

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

然而，滑动不是很好。我希望袋鼠战斗在播放列表栏的中间滑动，当你点击左边的拐角时，你能帮助我吗？ 这是我的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>

还有我的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");
    });
});

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

我把你的html分成两部分。第一个移动得比第二个慢。所以你可以在下一个标题中选择一半的文本，但你不必重复文本

html

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

---

可以不分离HTML吗？我想使用一个很好的嵌套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>

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

$('.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);
    }
});