js代码，鼠标经过停止滚动，移开继续滚动，go~go~go~！

Posted 2023-03-28

<script>
var delay = 3000;
var count = <!--$bjcount-->;
<!--if $bjcount>6-->
var showing = 5;
<!--else-->
var showing = 0;
<!--/if-->
var i = 0;
function move(i)
return function()
$('#recent'+i).remove().css('display', 'none').prependTo('#items');


function shift()
var toShow = (i + showing) % count;
$('#recent'+toShow).slideDown(500, move(i));
$('#recent'+i).slideUp(500, move(i));
i = (i + 1) % count;
setTimeout(shift, delay);

setTimeout(shift, delay);
</script>
现在是鼠标放上去也继续滚动。。。想要的效果是，鼠标经过停止，移开滚动

var time = setInterval (shift, delay);

setInterval 有一个返回值
可以使用 clearInterval(time) 中断
继续需要再执行 setInterval
判断是否执行需要另写一个变量,在 setInterval 执行之间设置为 true;
在 clearInterval 执行之后设置为 false;

用setInterval 吧，setTimeout 不适合这种情况追问

好的

追答

var time = setInterval (shift, delay);

setInterval 有一个返回值
可以使用 clearInterval(time) 中断
继续需要再执行 setInterval（shift, delay）；

用setInterval 吧，setTimeout 不适合这种情况

追问

我是菜鸟什么都不懂，你直接复制那段代码，修改一下给我吧，谢谢~

追答

var delay = 3000;
var count = ;
6-->
var showing = 5;

var showing = 0;

var i = 0;
function move(i)
return function()
$(\'#recent\'+i).remove().css(\'display\', \'none\').prependTo(\'#items\');


function shift()
var toShow = (i + showing) % count;
$(\'#recent\'+toShow).slideDown(500, move(i));
$(\'#recent\'+i).slideUp(500, move(i));
i = (i + 1) % count;

var timeshift = setInterval(shift, delay);

//这个是鼠标进入时调用onMouseOver
function stopshift()
clearInterval(timeshift);



//这个是鼠标移开时的方法onMouseOut
function startshift()
timeshift = setInterval(shift, delay);


望采纳

追问

我把这段复制替换原来的，鼠标放上去还是继续滚动，没效果啊。。。

追答

你设置了onMouseOver 跟 onMouseOut 么？

追问

......我不懂的，只是把你那段复制替换而已

追答

那你在逗我呢。。。我要你设置html页面的代码，你只是给我看了js代码。。。。我也不知道你页面是些什么东西，无语了，加我好友，我远程 给你设置，或者你把文件上传，我改完了再给你
快采纳我！~

参考技术A 可以改成这样的。
function autoScroll(obj)
var _t;
function scroll()
$(obj).find(".list1").animate(
marginTop : "-105px"
,500,function()
$(this).css(marginTop : "0px").find("li:first").appendTo(this);
)

_t = setInterval(scroll,2800);
$(obj).hover(
function()
clearInterval(_t);
,
function()
setInterval(scroll,2800);

)


$(function()
autoScroll(".scroll");
) 参考技术B 移开继续滚动追问

现在是鼠标放上去也继续滚动。。。想要的效果是，鼠标经过停止，移开滚动

JS实现鼠标移上去图片停止滚动移开恢复滚动效果

滚动图的实现，循环滚动图的实现，不同循环滚动图效果的实现，鼠标控制滚动图的动停，一步步循环渐进，学到的东西的越来越多，但是不难，需要的综合运用。

这是在做个人站的时候展示项目成果，因为不光需要展示，还需要介绍详细内容，就在滚动展示的地方做了这个效果以便于点开想要看的项目。

首先，要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例，那个是一块块的的滚动==>实现图片的循环滚动 .

这次我们就做滚动区域是平滑循环滚动效果。

下边是布局的HTML代码，原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示的图的大div(.in_img),

<div class=" ban_img">
        <div class="in_img">
            <div class="inside inside1"></div>
            <div class="inside inside2"></div>
            <div class="inside inside3"></div>
            <div class="inside inside4"></div>
            <div class="inside inside5"></div>
            <div class="inside inside6"></div>
            <div class="inside inside1"></div>
            <div class="inside inside2"></div>
            <div class="inside inside3"></div>
            <div class="inside inside4"></div>
                            
        </div>
</div>

下边是CSS样式，我加的是背景图，可跟实际情况选择（图片路径根据实际位置修改）

.ban_img{
    height: 400px;
    .in_img{
        width: 3000px;
        background-color: blue;
        .inside{
            width: 300px;
            float: left;
            height: 400px;
            background-repeat: no-repeat;
            background-size: cover;
            box-sizing: border-box;
            border: 3px solid #108A77;
        }
        .inside1{
            background-image: url(../img/binzhilang.png);
        }
        .inside2{
            background-image: url(../img/zhihui.png);
        }
        .inside3{
            background-image: url(../img/jredu.png);
        }
        .inside4{
            background-image: url(../img/sanyi.png);
        }
        .inside5{
            background-image: url(../img/cimply.png);
        }
        .inside6{
            background-image: url(../img/xingbake.png);
        }
    }
}

实现循环滚动的JS很简单，为div（.in_img）加一个定时器就可以了,每10毫秒调整它的marginleft-1px,循环完一遍，计数器num清零

var scroll=document.getElementsByClassName("in_img");
var num=0;
var time=setInterval(function(){
    num--;
    scroll[0].style.marginLeft=num+"px";
    if(num<=-1800){
                num=0;
            }
},10);

这样一来，平滑连续滚动的效果就可以实现了.

那么怎么实现标题所述效果呢？这也很简单，为div(.in_img)绑定两个事件来控制定时器就可以了。

首先添加鼠标移上去事件，来清除定时器

scroll[0].addEventListener("mouseover",function(){
    clearInterval(time);
});

然后添加鼠标移走事件，再恢复定时器

scroll[0].addEventListener("mouseout",function(){
    time=setInterval(function(){
        num--;
        scroll[0].style.marginLeft=num+"px";
        if(num<=-1800){
                    num=0;
                }
    },10);
})

这样一来，大功告成！

功能简单，代码不难，但很实用。人工手打，辛苦给点个推荐吧^_^