JavaScript实现带有子菜单和控件的slider轮播图效果

215 阅读 0 评论 142 点赞

我是靠谱客的博主忧郁白开水，这篇文章主要介绍JavaScript实现带有子菜单和控件的slider轮播图效果，现在分享给大家，希望可以做个参考。

大家或许做过（照片轮播）无限滚动图片的项目，但是，如果使用普通的滚动，当到达最后一张时，便会滚动回第一张，这是一个非常不好的用户体验。下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果，具体实现代码如下所示：

实现效果：

实现原理：

// 步骤
// 1. 获取事件源以及相关元素
// 2. 复制第一张图片所在的li，添加到ul的最后面
// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
// 4. 鼠标放到ol的li上切换图片
// 5. 添加定时器
// 6. 左右切换图片（鼠标放上去隐藏，移开显示）

实现代码：

复制代码

<!DOCTYPE html>
<html>
<head>
  <title>轮播图</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    .all{
      width: 500px;
      height: 200px;
      padding: 7px;
      margin: 100px auto;
      position: relative;
      box-shadow: 1px 1px 5px #2d2d2d;
    }
    .screen{
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li{
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    .screen ul{
      position: absolute;
      left: 0;
      top: 0;
      width: 3000px;
    }
    .all ol{
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li{
      float: left;
      width: 20px;
      height: 20px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    .all ol li.current{
      background-color: #03c03c;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      left: 5px;
      top: 50%;
      position: absolute;
      margin-top: -20px;
      background-color: #000;
      cursor: pointer;
      line-height: 35px;
      text-align: center;
      font-weight: bold;
      font-family: "微软雅黑";
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border-radius: 50%;
      box-shadow: 1px 1px 3px #2d2d2d;
    }
    #arr #right{
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id="all">
  <div class="screen" id="screen">
    <ul id="ul">
      <li><img src="./images/01.jpg" width="500" height="200"></li>
      <li><img src="./images/02.jpg" width="500" height="200"></li>
      <li><img src="./images/03.jpg" width="500" height="200"></li>
      <li><img src="./images/04.jpg" width="500" height="200"></li>
      <li><img src="./images/05.jpg" width="500" height="200"></li>
    </ul>
    
    <ol>
    </ol>
    
    <div id="arr">
      <span id="left"><</span>
      <span id="right">></span>
    </div>
  </div>
</div>

<script type="text/javascript">
  // 赋值第一张图片放到ul的最后，当图片切换到第五张的时候，直接切换第六张，再从第一张切换到第二张的时候先瞬间切换到第一张图片，然后滑倒第二张
  // 步骤
  // 1. 获取事件源以及相关元素
  // 2. 复制第一张图片所在的li，添加到ul的最后面
  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
  // 4. 鼠标放到ol的li上切换图片
  // 5. 添加定时器
  // 6. 左右切换图片（鼠标放上去隐藏，移开显示）
  // 1. 获取事件源以及相关元素
  var all = document.getElementById("all");
  var screen = all.firstElementChild || all.firstChild;
  var imgWidth = screen.offsetWidth;
  var ul = screen.firstElementChild || screen.firstChild;
  var ol = screen.children[1];
  var div = screen.lastElementChild || screen.lastChild;
  var spanArr = div.children;
  // 2. 复制第一张图片所在的li，添加到ul的最后面
  var ulNewLi = ul.children[0].cloneNode(true);
  ul.appendChild(ulNewLi);
  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
  for(var i=0; i<ul.children.length-1; i++){
    var olNewLi = document.createElement("li");
    olNewLi.innerHTML = i+1;
    ol.appendChild(olNewLi);
  } 
  var olLiArr = ol.children;
  olLiArr[0].className = "current";
  // 4. 鼠标放到ol的li上切换图片
  for(var i=0; i<olLiArr.length; i++){
    // 自定义属性，把索引值绑定到元素的index属性上
    olLiArr[i].index = i;
    olLiArr[i].onmouseover = function(){
      // 排他思想
      for(var j=0; j<olLiArr.length; j++){
        olLiArr[j].className = "";
      }
      this.className = "current"
      // 鼠标放到小方块上时，索引值和key以及square同步
      // key = this.index;
      // square = this.index;
      key = square = this.index;
      // 移动盒子
      animate(ul, -this.index*imgWidth);
    }
  }
  // 5. 添加定时器
  var timer = setInterval(autoPlay, 1000);
  // 固定向右切换图片
  // 两个定时器（一个记录图片，一个记录子菜单栏）
  var key = 0;
  var square = 0;
  function autoPlay(){
    // 通过key的自增来模拟图片的索引值，然后移动ul
    key++;
    if(key > olLiArr.length){
      // 图片已经滑到最后一张，接下来应该跳转到第一张，然后滑动到第二张
      ul.style.left = 0;
      key = 1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值，然后点亮盒子
    // 排他思想做小方块
    square++;
    if(square > olLiArr.length-1){
      // 索引值不能大于5，如果大于5则立即变为0；
      square = 0;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  // 鼠标放上去清除定时器，移开启动定时器
  all.onmouseover = function(){
    div.style.display = "block";
    clearInterval(timer);
  }
  all.onmouseout = function(){
    div.style.display = "none";
    timer = setInterval(autoPlay,1000);
  }
  // 6. 左右切换图片（鼠标放上去显示，移开隐藏）
  spanArr[0].onclick = function(){
    // 通过控制key的自增来模拟图片的索引值，然后移动ul
    key--;
    if(key<0){
      // 先移到最后一张，然后key的值取前一张的索引值，然后向前移动
      ul.style.left = -imgWidth*(olLiArr.length) + "px";
      key = olLiArr.length-1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值，然后点亮小方块
    square--;
    if(square<0){
      // 索引值不能大于等于5，如果为5，立即变为0
      square = olLiArr.length-1;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  spanArr[1].onclick = function(){
    // 右侧的和定时器一模一样
    autoPlay();
  }
  // 动画封装
  var absSpeed = 10; //设定步长
  function animate(ele, target){
    clearInterval(ele.timer);
    var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
    ele.timer = setInterval(function(){
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      if(Math.abs(val) < Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
      }
    }, 10)
  }
</script>
</body>
</html>

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html>
<head>
  <title>轮播图</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    .all{
      width: 500px;
      height: 200px;
      padding: 7px;
      margin: 100px auto;
      position: relative;
      box-shadow: 1px 1px 5px #2d2d2d;
    }
    .screen{
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li{
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    .screen ul{
      position: absolute;
      left: 0;
      top: 0;
      width: 3000px;
    }
    .all ol{
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li{
      float: left;
      width: 20px;
      height: 20px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    .all ol li.current{
      background-color: #03c03c;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      left: 5px;
      top: 50%;
      position: absolute;
      margin-top: -20px;
      background-color: #000;
      cursor: pointer;
      line-height: 35px;
      text-align: center;
      font-weight: bold;
      font-family: "微软雅黑";
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border-radius: 50%;
      box-shadow: 1px 1px 3px #2d2d2d;
    }
    #arr #right{
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id="all">
  <div class="screen" id="screen">
    <ul id="ul">
      <li><img src="./images/01.jpg" width="500" height="200"></li>
      <li><img src="./images/02.jpg" width="500" height="200"></li>
      <li><img src="./images/03.jpg" width="500" height="200"></li>
      <li><img src="./images/04.jpg" width="500" height="200"></li>
      <li><img src="./images/05.jpg" width="500" height="200"></li>
    </ul>
    <!-- 图片子菜单 -->
    <ol>
    </ol>
    <!-- 左右切换按钮 -->
    <div id="arr">
      <span id="left"><</span>
      <span id="right">></span>
    </div>
  </div>
</div>
<!-- script -->
<script type="text/javascript">
  // 赋值第一张图片放到ul的最后，当图片切换到第五张的时候，直接切换第六张，再从第一张切换到第二张的时候先瞬间切换到第一张图片，然后滑倒第二张
  // 步骤
  // 1. 获取事件源以及相关元素
  // 2. 复制第一张图片所在的li，添加到ul的最后面
  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
  // 4. 鼠标放到ol的li上切换图片
  // 5. 添加定时器
  // 6. 左右切换图片（鼠标放上去隐藏，移开显示）
  // 1. 获取事件源以及相关元素
  var all = document.getElementById("all");
  var screen = all.firstElementChild || all.firstChild;
  var imgWidth = screen.offsetWidth;
  var ul = screen.firstElementChild || screen.firstChild;
  var ol = screen.children[1];
  var div = screen.lastElementChild || screen.lastChild;
  var spanArr = div.children;
  // 2. 复制第一张图片所在的li，添加到ul的最后面
  var ulNewLi = ul.children[0].cloneNode(true);
  ul.appendChild(ulNewLi);
  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
  for(var i=0; i<ul.children.length-1; i++){
    var olNewLi = document.createElement("li");
    olNewLi.innerHTML = i+1;
    ol.appendChild(olNewLi);
  } 
  var olLiArr = ol.children;
  olLiArr[0].className = "current";
  // 4. 鼠标放到ol的li上切换图片
  for(var i=0; i<olLiArr.length; i++){
    // 自定义属性，把索引值绑定到元素的index属性上
    olLiArr[i].index = i;
    olLiArr[i].onmouseover = function(){
      // 排他思想
      for(var j=0; j<olLiArr.length; j++){
        olLiArr[j].className = "";
      }
      this.className = "current"
      // 鼠标放到小方块上时，索引值和key以及square同步
      // key = this.index;
      // square = this.index;
      key = square = this.index;
      // 移动盒子
      animate(ul, -this.index*imgWidth);
    }
  }
  // 5. 添加定时器
  var timer = setInterval(autoPlay, 1000);
  // 固定向右切换图片
  // 两个定时器（一个记录图片，一个记录子菜单栏）
  var key = 0;
  var square = 0;
  function autoPlay(){
    // 通过key的自增来模拟图片的索引值，然后移动ul
    key++;
    if(key > olLiArr.length){
      // 图片已经滑到最后一张，接下来应该跳转到第一张，然后滑动到第二张
      ul.style.left = 0;
      key = 1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值，然后点亮盒子
    // 排他思想做小方块
    square++;
    if(square > olLiArr.length-1){
      // 索引值不能大于5，如果大于5则立即变为0；
      square = 0;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  // 鼠标放上去清除定时器，移开启动定时器
  all.onmouseover = function(){
    div.style.display = "block";
    clearInterval(timer);
  }
  all.onmouseout = function(){
    div.style.display = "none";
    timer = setInterval(autoPlay,1000);
  }
  // 6. 左右切换图片（鼠标放上去显示，移开隐藏）
  spanArr[0].onclick = function(){
    // 通过控制key的自增来模拟图片的索引值，然后移动ul
    key--;
    if(key<0){
      // 先移到最后一张，然后key的值取前一张的索引值，然后向前移动
      ul.style.left = -imgWidth*(olLiArr.length) + "px";
      key = olLiArr.length-1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值，然后点亮小方块
    square--;
    if(square<0){
      // 索引值不能大于等于5，如果为5，立即变为0
      square = olLiArr.length-1;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  spanArr[1].onclick = function(){
    // 右侧的和定时器一模一样
    autoPlay();
  }
  // 动画封装
  var absSpeed = 10; //设定步长
  function animate(ele, target){
    clearInterval(ele.timer);
    var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
    ele.timer = setInterval(function(){
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      if(Math.abs(val) < Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
      }
    }, 10)
  }
</script>
</body>
</html>