脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery一组图片循环滚动

jQuery实现一组图片循环滚动

 更新时间：2022年01月25日 10:17:04   作者：丁七岁  
这篇文章主要为大家详细介绍了jQuery实现一组图片循环滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现一组图片循环滚动的具体代码，供大家参考，具体内容如下

效果：

代码：

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>实现一组图片的循环滚动</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 1066px;/*2张图片的总宽度*/
                height: 300px;
                background-color: #000000;
                margin: 120px auto;
                overflow: hidden;/*超出的隐藏*/
                border: 1px solid #00ff37;
            }
            ul{
                width: 3198px; /*6张图片的总宽度 放在一行*/
                height: 300px;
                list-style: none;
                background-color: #000000;
            }
            ul>li {
                float: left;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function () {
                //编写一个可以让图片自动循环滚动的函数(弄一个定时器，回调函数里设置它的marginLeft)
                var timer
                var offset = 0 //待会用这个变量设置它的marginLeft (js代码可以不写分号的，我是懒得写了)
                function autoRun(){
                    timer = setInterval(function () {
                        offset += -10 //这是marginLeft
                        if(offset <= -2132){
                            //滚动了四张图片 接着滚动
                            offset = 0
                        }
                        $("ul").css({
                            marginLeft:offset
                        })
                    },131.4)
                }
                autoRun()//滚动起来
                //监听li的移入 移出事件
                $("li").hover(function () {
                    //鼠标指针放上面 不让ta滚动(停掉这个定时器)
                    clearInterval(timer)
                    //鼠标指针没有放上面的图片 给他们一个黑色的背景 这样显得选中的这个亮
                    $(this).siblings().fadeTo(120,0.33)
                    //当前的这个图片亮
                    $(this).fadeTo(120,1)
                },function () {
                    autoRun() //滚动
                    $("li").fadeTo(120,1) //1-->全亮
                })


            })
        </script>
    </head>
    <body>
        <div>
            <ul>
                <li>
                    <img src="img/111.jpg">
                </li>
                <li>
                    <img src="img/222.jpg">
                </li>
                <li>
                    <img src="img/333.jpg">
                </li>
                <li>
                    <img src="img/444.jpg">
                </li>
                <li>
                    <img src="img/111.jpg">
                </li>
                <li>
                    <img src="img/222.jpg">
                </li>
            </ul>
        </div>
    </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论