代码亮点:增加图片时,你只需要再加一个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>
版权属于:乐心湖's Blog
本文链接:https://www.xn2001.com/archives/402.html
声明:博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!