多掌握一种方法总是会有好处的，学习编程就要多思考，举一反三
下面写一下实现图片自动播放的代码，由于学习的是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>