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