如何用jQuery来实现图片的无限滚动鼠标放上去就会停止移开会继续滚动的效果

最新推荐文章于 2024-09-25 11:25:05 发布

依本多情

最新推荐文章于 2024-09-25 11:25:05 发布

阅读量4.8k

点赞数 4

分类专栏：【jQuery】

本文链接：https://blog.csdn.net/qq_36520235/article/details/80517966

版权

【jQuery】专栏收录该内容

0 篇文章 0 订阅

订阅专栏

总结如何用jQuery来实现图片的无限滚动效果的思路分析

先看HTML代码

<body>
        <div>
            <ul>
                <li><img src="img/002.jpg" /> </li>
                <li><img src="img/001.jpg" /> </li>
                <li><img src="img/003.jpg" /> </li>
                <li><img src="img/004.jpg" /> </li>
                <li><img src="img/002.jpg" /> </li>
                <li><img src="img/001.jpg" /> </li>
            </ul>
        </div>
    </body>

这个是样式表

    <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 600px;
                height: 250px;
                margin: 100px auto;
                border: 2px solid black;                 
            }

            ul{
                list-style: none;
                width: 2500px;
                height: 300px;
//这个是当你鼠标移入的时候会暂停，而其他的图片背景颜色都是半透明的黑色的，
//当前的是正常显示的图片
                background: black;              
            }
            ul li{
                float: left;
            }
            /*其实就是把四个图片放到一个ul列表中，相当于放到一起，然后一起在div中进行滚动*/
        </style>

最重要的是JQ的实现的

<script>
            $(function(){

                //1.需要先让图片滚动起来
                var offSet = 0;
                var timer 
                function autoPlay(){
                    //这里是添加一个定时器，
                    timer= setInterval(function(){
                    //每次设置图片向左移动的距离，
                    offSet += -50;
                    //选中所有的ul（其实也就是所有的图片拼接一块就相当于是一个ul）
                    $("ul").css("margin-left",offSet);
                    //这里是判断图片左移的当前位置是不是到了图片的末尾的值，然后把图片拉回来重新运动
                    if(offSet<=-1200){
                        offSet =0 ;
                    }
                },60);

            }
                //2.需要监听li的移入和移出事件,这个可以连续放连个回调函数
                $("li").hover(function(){
                    //鼠标放上去的时候清除定时器
                    clearInterval(timer);
                    //给非当前设置蒙版（也就是除了当你选中的其他的所有的图片）
                    $(this).siblings().fadeTo(100,0.5);
                    //去除当前选中的蒙版
                    $(this).fadeTo(100,1);
                },function(){
                    //移出的时候
                    autoPlay();
                    //当鼠标移除的时候去除所有的蒙版
                    $("li").fadeTo(100,1);
                })

            })
        </script>