作业-原生js完成轮播图与悬停
代码亮点：增加图片时，你只需要再加一个li就可以了。不需要改动其他任何代码。
完整代码直接看文章结尾！
首先我们看一下需求
用到的东西有定时器，列表标签，定位，悬停在列表时停止定时器。
这里我们先让他展示出一张图片即可，为了方便，我们直接把图片名字改为1到5 +后缀的形式，比如1.jpg，2.jpg … 并且放在与html同级，便于我们观看。
html
<img src="1.jpg" id="img" />
我们把列表也加上吧
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
css
我们简单加入css，让效果看起来很美观一些，这里不会讲css，我自己也是瞎折腾的。
li {
height: 28px;
width: 28px;
border: 1px solid #68aa44;
line-height: 28px;
font-size: 14px;
text-align: center;
margin-right: 20px;
border-radius: 15px;
float: left;
cursor: pointer;
list-style-type: none;
}
img {
height: 600px;
}
稍微好看了一些了，我们就凑合用。
下面我们进入js实现功能的环节。
js
我们先简单构思一下如何让图片自动轮播
假设我们现在有一个定时器，我们传入一个功能，他可以自动切换图片的名称。
那么就是一个简单的将1改变为2的过程并循环，我们如何去判断这个循环的次数呢，这里有很多种思路。
为了效果一致且方便维护，我将列表的长度作为我图片的数量即可。
下面我们先将图片和列表在js中获取，
var lis = document.getElementsByTagName("li");
var img = document.getElementById("img");
console.log(lis.length)
我们可以看到获取了长度是五的数组，正对应5个li标签
我们定义一个函数，实现图片的自动更换。
var i = 1;
function chose(){
if (i <= lis.length) {
img.src = i + '.jpg';
i++;
}else{
i=0;
}
}我们定义一个定时器，传入已经写好的功能,设置为800ms.并且存放到一个变量中去(myChose),方便后面停止.
var myChose = window.setInterval("chose()",800);访问浏览器时,我们就可以看到图片在循环切换啦.
怎么让它悬停在列表12345的时候停止呢,很简单,我们在列表中绑定一个函数,让它停止即可,这里为了代码简洁,我们直接集成到chose函数中即可.
当有参数传进来的时候,直接切换到这个参数的图片,然后停止定时器.
if (li) {
i = li;
window.clearInterval(myChose);
}此时js的完整代码为
function chose(li){
if (li) {
i = li;
window.clearInterval(myChose);
}
if (i < lis.length) {
img.src = i + '.jpg';
i++;
}else{
i=0;
}
}html
<li onmouseover="chose(1)">1</li>
<li onmouseover="chose(2)">2</li>
<li onmouseover="chose(3)">3</li>
<li onmouseover="chose(4)">4</li>
<li onmouseover="chose(5)">5</li>到这里需求就基本实现了。
额外补充：
我们可以增加一个小功能，当图片切换时列表数字高亮，
我们先定义两个css，一个用于图片展示时高亮，一个用于回退效果。
.out {}
.over {
//设置数字的样式,当鼠标停在数字上时,给数字加点背景色和字体颜色.
background-color: red;
color: red;
}如何让数字高亮呢，这很简单，只要在改变图片的图示让数字定位到这个css中的over即可。但是就有一个难题了，如何让它回退呢，也很简单，但是很多人想不到，让我们定时器第二次调用函数的时候判断i是否为1，不为1说明上一次变过色，我们让它回去css中的out即可。
if(i!=1){
lis[i-2].className = "cout";
}此时js的完整代码为
<script type="text/javascript">
var lis = document.getElementsByTagName("li");
var img = document.getElementById("img");
console.log(lis.length);
var myChose = window.setInterval("chose()", 800);
var i = 1;
function chose(li) {
if(i!=1){
lis[i-2].className = "cout";
}
if (li) {
i = li;
window.clearInterval(myChose);
}
if (i <= lis.length) {
console.log(i)
img.src = i + '.jpg';
lis[i - 1].className = "cover";
i++;
} else {
i = 1;
}
}
</script>完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li {
height: 28px;
width: 28px;
border: 1px solid #68aa44;
line-height: 28px;
font-size: 14px;
text-align: center;
margin-right: 20px;
border-radius: 15px;
float: left;
cursor: pointer;
list-style-type: none;
}
img {
height: 600px;
}
.cout {}
.cover {
//设置数字的样式,当鼠标停在数字上时,给数字加点背景色和字体颜色.
background-color: red;
color: red;
}
</style>
</head>
<body>
<img src="1.jpg" id="img" />
<ul>
<li onmouseover="chose(1)">1</li>
<li onmouseover="chose(2)">2</li>
<li onmouseover="chose(3)">3</li>
<li onmouseover="chose(4)">4</li>
<li onmouseover="chose(5)">5</li>
</ul>
<script type="text/javascript">
var lis = document.getElementsByTagName("li");
var img = document.getElementById("img");
console.log(lis.length);
var myChose = window.setInterval("chose()", 800);
var i = 1;
function chose(li) {
if(i!=1){
lis[i-2].className = "cout";
}
if (li) {
i = li;
window.clearInterval(myChose);
}
if (i <= lis.length) {
console.log(i)
img.src = i + '.jpg';
lis[i - 1].className = "cover";
i++;
} else {
i = 1;
}
}
</script>
</body>
</html>