js跑马灯笔记

跑马灯效果，鼠标移入缩略图，弹框出现并展示大图 

HTML:
 

//上边框
<div class="move_hr" style="margin-top:20px">
            <div class="move_bg"></div>
        </div>
//跑马灯
<div class="slide_wrap">
            <ul style="left: -358.5px;">
                <li>
                    <div class="img_box">
                        <img src="./images/images/paoma1.png" alt="">
                    </div>
                    <h5>你好你好你好你好你好你好你好你好</h5>
                </li>
                <li>
                    <div class="img_box">
                        <img src="./images/images/paoma2.png" alt="">

                    </div>
                    <h5>你好你好你好你好你好你好你好你好</h5>
                </li>
                <li>
                    <div class="img_box">
                        <img src="./images/images/paoma3.png" alt="">

                    </div>
                    <h5>你好你好你好你好你好你你好你好你好</h5>
                </li>
                <li>
                    <div class="img_box">
                        <img src="./images/images/paoma4.png" alt="">

                    </div>
                    <h5>你好你好你好你好</h5>
                </li>
                <li>
                    <div class="img_box">
                        <img src="./images/images/paoma9.png" alt="">
                    </div>
                    <h5>你好你好你你好你好你好</h5>
                    <h5>你你好你好你好你你好</h5>
                </li>
            </ul>
        </div>
//下边框
<div class="move_hr" style="margin-bottom:20px">
            <div class="move_bg"></div>
        </div>
//弹框
<div id="model">
         <img src="" alt="">
</div>

 CSS:
 

.slide_wrap {
    margin: 20px auto;
    height: 260px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slide_wrap ul {
    height: 260px;
    width: 100000px;
    position: absolute;
    left: 0;
    box-sizing: border-box;
}
/*ul width的宽不能过小*/
.slide_wrap ul li {
    display: block;
    float: left;
    margin: 5px;
    height: 100%;
    border-radius: 5px;
    box-sizing: border-box;
    position: relative;
}
.slide_wrap ul li .img_box {
    height: 196px;
}
.slide_wrap ul li .img_box img{
    display: block;
    margin: 0 auto;
    height: 100%;
}
.slide_wrap ul li img {
    border-radius: 5px;
    display: block;
}

.slide_wrap ul li h5 {
   font-size: 16px;
   line-height: 32px;
   text-align: center;
}
.move_hr{
    width:100%;
    margin:0 auto;
    height: 20px;
   overflow: hidden;
   background: #fff;
   position: relative;
}
.move_hr .move_bg{
    width:100000px;
    height:20px;
    background:url(../border1.png) repeat;
    position: absolute;
    left:0;
    top:0;
}

JS:
 

$(document).ready(function () {
            var box = $(".slide_wrap"),
                v0 = 1.5; //这里添加滚动的对象和其速率
            Run(box, v0);
            function lastZoom(index) {
                if (index == 8) {
                    $("#model").css({ "width": "300px" })
                } else {
                }
            }
            function Run($Box, v) { //$Box移动的对象，v对象移动的速率
                var $Box_ul = $Box.find("ul"),
                    $Box_li = $Box_ul.find("li"),
                    left = 0,
                    s = 0,
                    timer; //定时器
                $Box_li.each(function (index) {
                    $(this).hover(function () {
                        $("#model").find("img").attr('src', "./images/images/paomabig" + (index + 1) + ".png");
                        $("#model").css({ "display": "block" });
                        // Resize();
                        lastZoom(index)
                    }, function () {
                        $("#model").css({ "display": "none" });
                    })
                    s += $(this).outerWidth(true); //即要滚动的长度
                })
                window.requestAnimationFrame = window.requestAnimationFrame || function (Tmove) {
                    return setTimeout(Tmove, 1000 / 60)
                };
                window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
                if (s >= $Box.width()) { //如果滚动长度超出Box长度即开始滚动，没有的话就不执行滚动
                    $Box_li.clone(true).appendTo($Box_ul);
                    Tmove();
                    function Tmove() {
                        //运动是移动left  从0到-s;（个人习惯往左滚）
                        left -= v;
                        if (left <= -s) {
                            left = 0;
                            $Box_ul.css("left", left);
                            $(".move_bg").css("left", left)
                        } else {
                            $Box_ul.css("left", left);
                            $(".move_bg").css("left", left)
                        }
                        timer = requestAnimationFrame(Tmove);
                    }
                    $Box_ul.hover(function () {
                        cancelAnimationFrame(timer);
                    }, function () {
                        Tmove()
                    });
                    $("#model").hover(function () {
                        $(this).css({ "display": "block" });
                        cancelAnimationFrame(timer);
                    }, function () {
                        $(this).css({ "display": "none" })
                        Tmove()
                    })
                }
            }
        })