两张图片来回滚动切换效果（匀速播放）

使用 匀速来回播放效果（控制div_i_roll.scrollLeft++;逻辑），详细如下

 

<div id="div_i_roll" style="width:218px;overflow:hidden;">

    &nbsp;

</div>

<div id="div_i1" style="display: none;">

    <img src="/Files/Ad/IMG_2394.JPG" alt="" />

</div>

<div id="div_i2" style="display: none;">

    <img src="/Files/Ad/IMG_2465.JPG" alt="" />

</div>

<script type="text/javascript">

    var speed_roll = 25;

    var isLeft = true;

    div_i_roll.innerHTML = div_i1.innerHTML;

    function Marquee_roll() {

        if (div_i_roll.scrollLeft == 0) {

            isLeft = true;

            div_i_roll.innerHTML = div_i1.innerHTML;

        }

        else {

            if (div_i_roll.scrollLeft >= div_i_roll.offsetWidth) {

                isLeft = false;

                div_i_roll.innerHTML = div_i2.innerHTML;

            }

        }

 

        if (isLeft) {

            div_i_roll.scrollLeft++;

        }

        else {

            div_i_roll.scrollLeft--;

        }

    }

    var MyMar_roll = setInterval(Marquee_roll, speed_roll);

    div_i_roll.onmouseover = function () { clearInterval(MyMar_roll); }

    div_i_roll.onmouseout = function () { MyMar_roll = setInterval(Marquee_roll, speed_roll); }

</script>

 

思路：使用div.scrollLeft++来达到层的滚动，只要控制了当层移到右边的时候，就能识别并开始往左滚动即div.scrollLeft--

转载于:https://www.cnblogs.com/tongjunjiang/p/3258344.html