两张图片来回滚动切换效果(匀速播放)
使用匀速来回播放效果(控制div_i_roll.scrollLeft++;逻辑),详细如下
<div id="div_i_roll" style="width:218px;overflow:hidden;">
</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--