js和jquery实现图片无缝轮播的不同写法

时间：2022-01-13 21:23:44

多掌握一种方法总是会有好处的，学习编程就要多思考，举一反三

下面写一下实现图片自动播放的代码，由于学习的是javascript，代码量很大，所以又学习了jquery库的操作，非常简便

还有非常有逼格的三元运算： 条件 ?(表示True) do something :(表示False) do others

这是css代码

* {

    padding:;

    margin:;

}

ul {

    list-style:none;

}

.box {

    width:240px;

    height:180px;

    /*在这里必须要设置高度，因为里面只有一个ul，而我们给ul设置的是绝对定位，提升了层级，那么box文档流中*/

    /*没有元素撑开box的高度，所以我们要给其设置固定高度*/

    background:lightgray;

    margin:200px auto;

    overflow:hidden;

    position:relative;

}

ul {

    width:400%;

    height:180px;

    position:absolute;

    top:;

    left:;

    background:red;

}

ul li {

    float:left;

}

这是html + js代码

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>a website</title>

        <link rel = "stylesheet" href = "css.css" type = "text/css">

    </head>

    <body>

    <div class = "box">

        <ul class = "u">

            <li><img src = "img/01.jpg"></li>

            <li><img src = "img/02.jpg"></li>

            <li><img src = "img/03.jpg"></li>

            <li><img src = "img/04.jpg"></li>

        </ul>

    </div>

    </body>

    <script src = "jquery-3.2.1.js"></script>

    <script type = "text/javascript">

//        想要实现的效果：

//        1.打开网页，图片自动往左移动，当4张图片都移动完之后又重新移动，实现无缝轮播的效果

//        2.当鼠标滑到图片区域图片会停止轮播

//        3.当鼠标滑出图片区域图片会按照原来的位置继续轮播

//        方法一：基于javascript来实现

//        window.onload = function() {

//            var box = document.getElementsByClassName("box")[0];

//            var ul = document.getElementsByTagName("ul")[0];

//            var count = 0;

//            var timer = null;

//            function func(){

//                count--;

//                count < -720 ? count=0 : count;

//                ul.style.left = count + "px";

//            }

//            timer = setInterval(func,20);

//            box.onmouseover = function(){

//                clearInterval(timer)

//            }

//            box.onmouseout = function(){

//                timer = setInterval(func,20);

//            }

//            }

//            方法二：基于jquery实现

            $(function(){

                var count = 0;

                var timer = null;

                function func(){

                    count --;

                    count < -720 ? count = 0

                    :$("ul").css("left",count)

                }

                timer = setInterval(func,20);

                $(".box").mouseover(function(){

                    clearInterval(timer);

                });

                $(".box").mouseout(function(){

                    timer = setInterval(func,20);

                });

            });

//            现在我们加一个按钮控制轮播动画的位置

//            $(".box").before("<button>移动</button>");

//            $("button").click(function(){

//                $(".box").css("margin","20px auto")

//            })

//              或者加一个按钮让轮播位置产生动画效果

//              $(".box").before("<button>移动</button>");

//              $("button").click(function(){

//                  $(".box").toggle(1000)

//              })

    </script>

</html>

相关文章