JS实现可用滑块滑动的缓动图

尝试模仿京东的“发现好货”模块的可用滑块滑动的缓动图

js代码

function $(id) { return document.getelementbyid(id); }
//缓动轮播图
var fhtimer;
var fhnum = 0;
var barnum = 0;
fhtimer = setinterval(marquee, 20);
function marquee() {
    fhnum--;
    barnum = fhnum;
    if(fhnum < -2400) {
        fhnum = 0;
    }
    $("fhc_ul").style.left = fhnum + "px";
    if(fhnum < -2400) {
        barnum = fhnum + 2400;
    }
    $("fhc_dbar").style.left = -(barnum / 2.75) + "px";
}
$("fhcshow").onmouseover = function() {
    $("fhc_d_box").style.display = "block";
    clearinterval(fhtimer);
}
$("fhc_d_box").onmouseover = function() {
    $("fhc_d_box").style.display = "block";
}
$("fhcshow").onmouseout = function() {
    $("fhc_d_box").style.display = "none";
    fhtimer = setinterval(marquee, 20);
}
//鼠标悬浮在标题也在暂停滚动
$("fhtit").onmouseover = function() {
    clearinterval(fhtimer);
}
$("fhtit").onmouseout = function() {
    fhtimer = setinterval(marquee, 20);
}
//滑块
$("fhc_dbar").onmousedown = function(event) {
    var event = event || window.event;
    var leftvalue = event.clientx - this.offsetleft;
    document.onmousemove = function(event) {
        var evt = event || window.event;
        var locationx = evt.clientx - leftvalue;
        if(locationx < 0) {
            locationx = 0;
        }
        else if(locationx > 960 - 99) {
            locationx = 960 - 99;
        }
        $("fhc_dbar").style.left = locationx + "px";
        fhnum = -locationx * 2.75;
        //如果选中了，就取消选中，防止出现bug
        window.getselection ? window.getselection().removeallranges() : document.selection.empty();
    }
    document.onmouseup = function() {
        document.onmousemove = null;//取消注册的这个事件
    }
}

html代码

<div class="fxhh_ctt">
    <div class="fh_c_show" id="fhcshow">
        <ul class="fh_c_under" id="fhc_ul">
            <li><a href=" ">
                <p class="toptit">商品1</p>
                <img src="" alt="">
            </a></li>
            <li><a href=" ">
                <img src="" alt="">
                <p class="bottit">商品2</p>
            </a></li>
            <li><a href=" ">
                <p class="toptit">商品3</p>
                <img src="" alt="">
            </a></li>
            <li><a href=" ">
                <img src="" alt="">
                <p class="bottit">商品4</p>
            </a></li>
            <li><a href=" ">
                <p class="toptit">商品5</p>
                <img src="" alt="">
            </a></li>
            <li><a href=" ">
                <img src="" alt="">
                <p class="bottit">商品6</p>
            </a></li>
            <li><a href=" ">
                <p class="toptit">商品7</p>
                <img src="" alt="">
            </a></li>
            <li><a href=" ">
                <img src="" alt="">
                <p class="bottit">商品8</p>
            </a></li>
            <li><a href=" ">
                <p class="toptit">商品9</p>
                <img src="" alt="">
            </a></li>
            <li><a href=" ">
                <img src="" alt="">
                <p class="bottit">商品10</p>
            </a></li>
            <li><a href=" ">
                <p class="toptit">商品11</p>
                <img src="" alt="">
            </a></li>
            <li><a href=" ">
                <img src="" alt="">
                <p class="bottit">商品12</p>
            </a></li>
            <li><a href=" ">
                <p class="toptit">商品1</p>
                <img src="" alt="">
            </a></li>
            <li><a href=" ">
                <img src="" alt="">
                <p class="bottit">商品2</p>
            </a></li>
            <li><a href=" ">
                <p class="toptit">商品3</p>
                <img src="" alt="">
            </a></li>
            <li><a href=" ">
                <img src="" alt="">
                <p class="bottit">商品4</p>
            </a></li>
            <li><a href=" ">
                <p class="toptit">商品5</p>
                <img src="" alt="">
            </a></li>
        </ul>
    </div>
    <!-- 滑块 -->
    <div class="fhc_box" id="fhc_d_box">
        <div class="fhc_drop" id="fhc_dbar"></div>
    </div>
    <!-- 滑块end -->
</div>

css代码

.fxhh .fxhh_ctt {
    width: 990px;
    background-color: #fff;
    float: left;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under img {
    width: 150px;
    height: 150px;
}
.fxhh .fxhh_ctt .fh_c_show {
    width: 990px;
    height: 260px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under {
    width: 2000%;
    position: absolute;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under li {
    float: left;
    text-align: center;
    width: 150px;
    height: 180px;
    margin-top: 40px;
    margin-right: 50px;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under li .toptit {
    margin-bottom: 10px;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under li .bottit {
    margin-top: 10px;
}
.fxhh .fxhh_ctt .fhc_box {
    display: none;
    width: 960px;
    height: 4px;
    background-color: #f3f3f3;
    margin: 0 auto;
    position: absolute;
    top: 250px;
    left: 210px;
}
.fxhh .fxhh_ctt .fhc_drop {
    width: 99px;
    height: 9px;
    border-radius: 4px;
    background-color: #d8d8d8;
    position: absolute;
    top: -3px;
}