JQ实现滚动图的效果

最新推荐文章于 2024-01-29 10:23:50 发布

steve1988717

最新推荐文章于 2024-01-29 10:23:50 发布

阅读量682

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/steve1988717/article/details/85008664

版权

Jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

初始化自动滚动，需要开启一个计时器；当鼠标进入时，滚动停止，其他的选项变暗，厉害时候，又都变亮，继续滚动
在这里插入图片描述
代码如下

<script>
 $(function () {
      $(".sub.sub>ul>li:even").css("backgroundColor","#dedfed")
      $(".sub.sub>ul>li:odd").css("backgroundColor","#cafded")
     $(".sub.sub>ul>li:first").clone().appendTo($(".sub.sub>ul"))
     $(".sub.sub>ul>li:first").next().clone().appendTo($(".sub.sub>ul"))
     var timer; var m=0;
     function movemy(){
         timer = setInterval(function () {
             if( m<=-800 ){
                 m=0;
             }
             $(".sub.sub>ul").css("top",m);
             m += -10;

         },300)
     }
     movemy();
     $(".sub.sub>ul>li").mouseenter(function () {
         clearInterval(timer);
         timer=null;
         $(this).fadeTo(0.5,100);
         $(this).siblings().fadeTo(100,0.5);
     })
     $(".sub.sub>ul").mouseleave(function () {
         $(".sub.sub>ul>li").fadeTo(0.5,100);
         movemy();
     })


 })
</script>