这篇文章主要介绍了js图片轮播效果实现代码，文章对每一步进行了详细阐述，标注注意事项，为顺利实现js图片轮播效果做好铺垫，对轮播效果感兴趣的朋友可以参考一下

首先给大家看一看js图片轮播效果，如下图

 

具体思路：

一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index
二、添加定时器，每隔2秒钟index递增一次、调用一次切换图片函数
提示:
1、 index不能一直无限制的递增下去，需做判断
2、调用切换图片函数时需将递增之后的index作为参数传过去
三、定义图片切换函数
提示:
  1.遍历所有放数字索引的li，将每个li上的类去掉。
  2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。
  3. 根据传递过来的index值计算放图片的ul的top值
  4. 改变index的值，让其等于传递过来的参数值
注意：放图片的ul的top值=-index*单张图片的高度（所有图片必须等高）
四、鼠标划过整个容器时，图片停止切换，离开继续
提示:
1.  鼠标滑过整个容器时清除定时器
2.  鼠标离开时继续执行定时器，切换至下一张图片
五、遍历所有放数字的li，且给他们添加索引、鼠标滑过时切换至对应的图片。
        鼠标滑过时调用图片切换函数，将滑过的li的索引传过去。
具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < title >Document</ title >
  < style >
  *{margin:0;
  padding:0;
  list-style:none;}
  .wrap{height:170px;
  width:490px;
  margin:60px auto;
  overflow: hidden;
  position: relative;
  margin:100px auto;}
  .wrap ul{position:absolute;}
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
  right:5px;
  bottom:10px;}
  .wrap ol li{height:20px; width: 20px;
  background:#ccc;
  border:solid 1px #666;
  margin-left:5px;
  color:#000;
  float:left;
  line-height:center;
  text-align:center;
  cursor:pointer;}
  .wrap ol .on{background:#E97305;
  color:#fff;}
  </ style >
  < script type = "text/javascript" >
  window.onload=function(){
  var wrap=document.getElementById('wrap'),
  pic=document.getElementById('pic').getElementsByTagName("li"),
  list=document.getElementById('list').getElementsByTagName('li'),
  index=0,
  timer=null;
  // 定义并调用自动播放函数
  timer = setInterval(autoPlay, 2000);
  // 鼠标划过整个容器时停止自动播放
  wrap.onmouseover = function () {
  clearInterval(timer);
  }
  // 鼠标离开整个容器时继续播放至下一张
  wrap.onmouseout = function () {
  timer = setInterval(autoPlay, 2000);
  }
  // 遍历所有数字导航实现划过切换至对应的图片
  for (var i = 0; i < list.length ; i++) {
  list[i] .onmouseover = function () {
  clearInterval(timer);
  index = this .innerText - 1;
  changePic(index);
  };
  };
  function autoPlay () {
  if (++index >= pic.length) index = 0;
  changePic(index);
  }
  // 定义图片切换函数
  function changePic (curIndex) {
  for (var i = 0; i < pic.length ; ++i) {
  pic[i] .style.display = "none" ;
  list[i] .className = "" ;
  }
  pic[curIndex] .style.display = "block" ;
  list[curIndex] .className = "on" ;
  }
  };
  </script>
</ head >
< body >
  < div class = "wrap" id = 'wrap' >
  < ul id = "pic" >
  < li >< img src = "1.jpg" alt = "" ></ li >
  < li >< img src = "2.jpg" alt = "" ></ li >
  < li >< img src = "3.jpg" alt = "" ></ li >
  < li >< img src = "4.jpg" alt = "" ></ li >
  < li >< img src = "5.jpg" alt = "" ></ li >
  </ ul >
  < ol id = "list" >
  < li class = "on" >1</ li >
  < li >2</ li >
  < li >3</ li >
  < li >4</ li >
  < li >5</ li >
  </ ol >
  </ div >
</ body >
</ html >

以上就是本文的全部内容，为大家分享了js图片轮播效果实现代码，希望大家喜欢，根据自己的喜好更换图片，制作属于自己的图片轮播效果。

原文链接：http://www.jb51.net/article/74736.htm

# javascript # css
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生