前段练习 静态网页（三）：文字列表轮播与横向排列

一、等分模块制作

1.1 获取模块宽度

可以清晰的感觉出，模块成三等分。

虽然开始区域和body开始区域相同，但尾部区域略宽于body区域。
若假设，图片的宽度是被控制的，那这一块儿就不在body中，而可以想到，我们有两种方法设定这一组合模块的整体宽度

1. 获取浏览器宽度，然后减去两边的留白宽度
2. 设定整体的mergin-left为body部分留白宽度，然后设置百分比width来逐步调节宽度
   若假设，图片的宽度是没有被控制的，那么我们就只需要考虑内部模块的宽度

我们先假设是后者，该模块是在div.body中的，只是图片的宽度没有被控制好，溢出了。那我们只需要考虑下属模块的宽度
我们先获取到body模块的宽度为885，有两个空隙，将空隙宽度设为15，则三等分的每个模块宽度为285
为了形成横向排列，设定float=left

        
        <div class="extra left extraLeftPadding">
            <p class="h2">签约快讯p>
            <a href="#"><img src="images/top.png" width="100%" />a>
        div>
        <div class="extra left extraLeftPadding">
            
            <p class="h2">网络解决方案p>
            <a href="#"><img src="images/top.png" width="100%" />a>
        div>
        <div class="extra left">
            <p class="h2">网络经典案例p>
            <a href="#"><img src="images/top.png" width="100%" />a>
        div>

div.extra {
    width: var(--extra_width);
}

div.extraLeftPadding{
    padding-right:var(--extra_rightPadding);
}

1.2 二级标题

设置好二级标题需要的字体样式，达成下图效果

.extra p.h2 {
    /* 字体 */
    font-family: var(--body_h2_fontTypeface);
    font-size: var(--body_h2_fontSize);
    font-weight: var(--body_h2_fontWeight);
}

1.3 样式布局

PART I：文字内容
这部分就是元素比较多，然后注意设置间隔。其中用color: rgba(000, 000, 000, 0.6);设置透明度。

、

元素自带上下margin值。最后设置出一列占高60px，所以设置高度180px。

            <p class="h2">签约快讯p>
            <div class="contract" id=contract_list>
                <ul>
                    <li>
                        <a herf=#>天恒什么产品与什么什么签约成功a>
                        <p>2017-02-12p>
                    li>
                    <li>
                        <a herf=#>天恒什么产品与什么什么签约成功a>
                        <p>2017-02-12p>
                    li>
                    <li>
                        <a herf=#>天恒什么产品与什么什么签约成功a>
                        <p>2017-02-12p>
                    li>
                    <li>
                        <a herf=#>天恒什么产品与什么什么签约成功a>
                        <p>2017-02-12p>
                    li>
                ul>
            div>
        div>

/* 签约部分 */

.extra div.contract {
    position: relative;
    border: none;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.contract ul {
    position: relative;
    left: 0;
    padding: 0px;
    margin: 0px;
}

.contract ul li {
    list-style: none;
    float: left;
    width: 100%;
    height: 30px;
    padding-bottom: 30px;
}

.contract ul li a {
    font-size: var(--extra_contract_fontSize_a);
    font-family: var(--extra_contract_fontTypeface);
    font-weight: var(--extra_contract_fontWeight_a);
}

.contract ul li p {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: var(--extra_contract_fontSize_p);
    font-family: var(--extra_contract_fontTypeface);
    /* font-weight: var(--extra_contract_fontWeight_p); */
    color: rgba(000, 000, 000, 0.6);
}

PART II：图片部分
布局也简单，图片+底部文字即可

        <div class="extra left extraLeftPadding">
            <p class="h2">网络解决方案p>
            <a href="#"><img src="images/bottomleft.png" width="100%" />a>
            <p class="extraFooter">关于天恒网络解决网上速度的问题p>
        div>
        <div class="extra left">
            <p class="h2">网络经典案例p>
            <a href="#"><img src="images/bottomright.png" width="100%" />a>
            <p class="extraFooter">关于天恒网络解决网上速度的问题p>
        div>

p.extraFooter{
    font-family: var(--extra_contract_fontSize_p);
}

二、文字滚动效果

参考文章：文字列表滚动

1. 滚动效果的动效实现可以考虑成通过js代码动态调整文字列的高度所致。了解到setTimeout(fName, 100)方法，可以在等间隔时间内执行fName方法。
2. 我们每次执行将内容向上移动一点点，当移动的高度完成一个列表项后，设置一个停顿效果。
3. 为了使移动的时候，不产生空白效果，我们用oUl.innerHTML += oUl.innerHTML;语句复制一次文本内容。不然会出现如下效果：
   
4. 基于上诉内容，当移动的部分超过了整体高度的一半时，就代表顶部展示到了重复内容。此时就将模块顶部重新设置为0

window.onload = function () {
    var oDiv = document.getElementById('contract_list');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var timer = null;
    //由于单列高度60，每次移动1，当移动达到60的时候，进行一次暂停。
    var iSpeed = -1;
    // 为了避免轮播时内容空缺
    oUl.innerHTML += oUl.innerHTML;
    // 设置ul实际高度
    oUl.style.height = aLi.length * aLi[0].offsetHeight + 'px';
    // 定期执行
    timer = setTimeout(fnMove, 10);

    
    console.log(oUl.offsetTop);
    console.log(oUl.offsetHeight);

    oDiv.onmouseover = function () {
        clearInterval(timer);
    }
    oDiv.onmouseout = function () {
        clearInterval(timer);
        timer = setInterval(fnMove, 10);
    }
    function fnMove() {
        console.log(oUl.style.top)
        if (oUl.offsetTop <= -oUl.offsetHeight / 2) {
            oUl.style.top = 0;
        }
        oUl.style.top = oUl.offsetTop + iSpeed + 'px';
        console.log(oUl.offsetTop);
        if ((oUl.offsetTop % 60) == 0) {
            clearInterval(timer);
            timer = setTimeout(fnMove, 2000);

        } else {
            clearInterval(timer);
            timer = setTimeout(fnMove, 10);
        }
    }
}