选集

效果

列表下选集滚动功能，节省空间。

代码

结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style>
    .sub-tvlist-slide{overflow: auto;border-top: 1px solid #ebebeb;border-bottom:1px solid #ebebeb; }
    .parts-number{width: 60px;height: 60px;line-height: 60px;float: left; color: #9a9a9a; text-align: center;text-decoration: none;border-right:  1px solid #ebebeb;position: relative;}
</style>
<div class="sub-tvlist">
    <div class="sub-tvlist-info">
        <div class="sub-tvlist-info-div1">选集</div>
        <div class="sub-tvlist-info-div2">更新到了100集</div>
    </div>
    <div class="sub-tvlist-slide">
        <div id="slide">
            <a href="" class="parts-number">
                <span>1</span>
                <b class="parts-tag">付费</b>
            </a>
            <a href="" class="parts-number">
                <span>2</span>
                <b class="parts-tag">付费</b>
            </a>
            <a href="" class="parts-number">
                <span>3</span>
                <b class="parts-tag">付费</b>
            </a>
            <a href="" class="parts-number">
                <span>3</span>
                <b class="parts-tag">付费</b>
            </a>
            <a href="" class="parts-number">
                <span>3</span>
                <b class="parts-tag">付费</b>
            </a>
            <a href="" class="parts-number">
                <span>3</span>
                <b class="parts-tag">付费</b>
            </a>
            <a href="" class="parts-number">
                <span>3</span>
                <b class="parts-tag">付费</b>
            </a>
            <a href="" class="parts-number">
                <span>3</span>
                <b class="parts-tag">付费</b>
            </a>
            <a href="" class="parts-number">
                <span>3</span>
                <b class="parts-tag">付费</b>
            </a>
        </div>
    </div>   
</div>

JS：

1
2
3
4
5
6
7
8
var slideArray = document.getElementsByClassName("parts-number");
var slideEle = document.getElementById("slide");
var listWidth = slideArray[0].offsetWidth;
window.onload = function(){
    slideEle.style.width = listWidth*slideArray.length + 'px';
}

加上当前集数的index与宽度相乘，可以将集数放置在slide的最左边

1
2
3
4
5
6
7
8
9
10
11
12
$('.slide-video-number').each(function (index,domEle){
    if($(domEle).attr("playstatus") == 1){
        $(domEle).css("color","red");
        var widthValue = listWidth * index;
        $(".sub-tvlist-slide").scrollLeft(widthValue)
    }  
});
/*
**这里的slide-video-number是所有的集数，去判断是否正在播放，是的话就改变当前的颜色，并将滚动条的距离左移需要的width;
**[PS:一开始想的是offset().left，结果发现不行。。。。]
*/
【页面效果】, 选集