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

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

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

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

 

这是css代码

* {
    padding:0;
    margin:0;
}
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:0;
    left:0;
    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>

 

posted on 2018-04-16 11:04  Tarantino  阅读(263)  评论(0)  编辑  收藏  举报

导航