jQuery实现简单的停顿轮播图，无缝滚动

最新推荐文章于 2019-10-18 12:16:02 发布

堅持就會成功

最新推荐文章于 2019-10-18 12:16:02 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/panchangzhi/article/details/51782336

本文介绍了一种使用jQuery实现网页元素动画的方法，包括页面元素的渐隐渐现及无缝滚动效果。通过定时器与鼠标悬停事件相结合，使得页面更加生动且交互友好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
        $(function(){
//            渐隐渐现
            (function(){
               //把两个对象从渐隐再到渐现定为一个周期
                function change(){
                    $('#slide-item').find('li').eq(0).animate({'opacity':0},1000).delay(2000)
                        .animate({'opacity':1},1000);
                    $('#slide-item').find('li').eq(1).animate({'opacity':1},1000).delay(2000)
                        .animate({'opacity':0},1000);
                }
                change();
                setInterval(function(){
                    change();
                },6000);
            })();

//            无缝滚动
            (function (){
                var time = null;
           
                function left(){
                   if($('#slideBottom').position().left==-($('#slideBottom').width()-4)/2){
                        $('#slideBottom').css('left','0px');
                    }
                    $('#slideBottom').animate({'left':($('#slideBottom').position().left-277)+'px'},500)
                }
                function toleft(){
                    stop();
                    time = setInterval(left,2500);
                }
                function stop (){
                    clearInterval(time);
                }

                $('#slideBottom').find('li').mouseover(stop);
                $('#slideBottom').find('li').mouseout(toleft);
                toleft();
            })()
        });
    </script>