亲宝软件园·资讯

展开

jQuery一组图片循环滚动

丁七岁 人气:0

效果:

代码:

<!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>

加载全部内容

相关教程
猜你喜欢
用户评论