moofing's blog
首页 标签 分类 归档 RSS

code moonlight && general carousel

2021-02-16 practice | 本篇文章共1.6k字，预计阅读9分钟

轮播图是一种十分常见的图片组合展示形式，它其实上是在有限的空间里拓宽了图片内容的输出视野，通过丰富的交互形态，增强了图片的灵活性和观赏感

轮播图核心功能实现：

  • 完成图片的前或后逐个切换
  • 完成底部按钮和图片的关联导航
  • 触发底部按钮，给定背景色以标记，完成画面切换
  • 图片切换的同时，背景色标记随之流动
  • 默认环境下图片自动轮播，主区域聚焦时切换手动模式

html page

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel='stylesheet' href='./reset.css'/>
  <link rel='stylesheet' href='./pattern.css'/>
  <link rel='stylesheet' href='./iconfont.css'/>
  <script src='./swtich.js'></script>
  <title>a navigation of switch picture</title>
</head>
<body>
  <div class='nav_pic'>
    <div class='switchList'>
      <ul>
        <li><a href='javascript:;'><img src='./image/5.jpg'/></a></li>
        <li><a href='javascript:;'><img src='./image/2.jpg'/></a></li>
        <li><a href='javascript:;'><img src='./image/3.jpg'/></a></li>
        <li><a href='javascript:;'><img src='./image/4.jpg'/></a></li>
        <li><a href='javascript:;'><img src='./image/1.jpg'/></a></li>
      </ul>
    </div>
    <div class='switchControl'>
      <div class='back'><i class='iconfont icon-houtui1'></i></div>
      <div class='front'><i class='iconfont icon-qianjin'></i></div>
    </div>
    <div class='switchButtons'>
      <ul>
        <li><a class='active' href='javascript:;'></a></li>
        <li><a href='javascript:;'></a></li>
        <li><a href='javascript:;'></a></li>
        <li><a href='javascript:;'></a></li>
        <li><a href='javascript:;'></a></li>
      </ul>
    </div>
  </div>
</body>
</html>

css layout

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
.nav_pic {
  position:relative;
  width:500px;
  height:270px;
  background-color:lightcoral;
  margin:60px auto;
  overflow:hidden;
}
.nav_pic ul {
  width:2500px;
}
.switchList {
  position:relative;
}
.nav_pic .switchList>ul>li {
  float:left;
  margin:0 10px;
}

/* switchControl */
.nav_pic .switchControl .iconfont {
  position:absolute;
  font-size:32px;
  color:rgb(220,220,220);
  top:110px;
  cursor:pointer;
  opacity:0.8
}
.nav_pic .switchControl .icon-houtui1 {
  left:30px;
}
.nav_pic .switchControl .icon-qianjin {
  right:30px;
}

/* switchButtons */
.nav_pic .switchButtons {
  position:absolute;
  bottom:10px;
  opacity:0.8
}
.nav_pic .switchButtons>ul>li {
  float:left;
  padding:5px;
}
.nav_pic .switchButtons a {
  display:block;
  width:15px;
  height:15px;
  border-radius:50%;
  background-color:rgb(239, 241, 239)
}
.nav_pic .active {
  background-color:red !important
}

modules

通过计算，使底部buttons水平居中

1
2
3
4
let buttonItem = document.querySelector('.switchButtons>ul>li').offsetWidth
  let buttonsLength = document.querySelectorAll('.switchButtons>ul>li').length
  let switchButtons = document.querySelector('.switchButtons')
  switchButtons.style.left = (mainwidth - buttonItem * buttonsLength) / 2 + 'px'

左右无缝切换图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let front = document.querySelector('.front')
 let back = document.querySelector('.back')
 let nextPage = front.onclick = function () {
   let switchList = document.querySelector('.switchList')
   currentLeft = switchList.offsetLeft
   switchList.style.left = -mainwidth + currentLeft + 'px'
   if (currentLeft == -mainwidth * 4) {
     switchList.style.left = '0px'
   }
   flowMove(setpos)
 }
 back.onclick = function () {
   let switchList = document.querySelector('.switchList')
   currentLeft = switchList.offsetLeft
   switchList.style.left = mainwidth + currentLeft + 'px'
   if (currentLeft == 0) {
     switchList.style.left = -mainwidth * 4 + 'px'
   }
   setpos = false
   flowMove(setpos)
 }

底部按钮与图片的关联导航

1
2
3
4
5
6
7
let buttonLists = document.querySelectorAll('.switchButtons>ul>li')
  let switchList = document.querySelector('.switchList')
  for (let i = 0; i < buttonLists.length; i++) {
    buttonLists[i].onclick = function () {
      switchList.style.left = -mainwidth * i + 'px'
    }
  }

点击对应底部按钮时，给予唯一显示的背景色以标识

1
2
3
4
5
6
7
8
9
10
11
let aLists = document.querySelectorAll('.switchButtons>ul>li>a')
 for (let i = 0; i < aLists.length; i++) {
   aLists[i].onclick = function () {
     for (let j = 0; j < aLists.length; j++) {
       if (aLists[j].hasAttribute('class')) {
         aLists[j].removeAttribute('class')
       }
     }
     this.setAttribute('class', 'active')
   }
 }

图片左右切换时，对应按钮随之捆绑流动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function flowMove() {
   if (setpos) {
     index = Math.abs(currentLeft / mainwidth) + 1
     if (index > aLists.length - 1) {
       index = 0
     }
   } else {
     index = Math.abs(currentLeft / mainwidth) - 1
     if (index < 0) {
       index = aLists.length - 1
     }
   }
   for (let i = 0; i < aLists.length; i++) {
     aLists[i].removeAttribute('class')
   }
   aLists[index].setAttribute('class', 'active')
 }

自动轮播

1
2
3
4
5
6
navPic.onmouseover = function () {
   clearInterval(clearclock)
 }
 navPic.onmouseout = function () {
   clearclock = setInterval(nextPage, 2000)
 }

js

the initial js , no auto change , the differenent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// switch left or right
   let setpos = true
   function nextPic(turn) {
       let switchList = document.querySelector('.switchList')
       currentLeft = switchList.offsetLeft
       if(turn){
           switchList.style.left = -500 + currentLeft + 'px'
           if (currentLeft == -2000) {
               switchList.style.left = '0px'
           }
           flowMove(setpos)
       }else{
           switchList.style.left = 500 + currentLeft + 'px'
           if (currentLeft == 0) {
               switchList.style.left = '-2000px'
           }
           setpos = false
           flowMove(setpos)
       }
   }

switch.js

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
window.onload=function(){
  let navPic = document.querySelector('.nav_pic')
  let mainwidth = navPic.offsetWidth
  let setpos = true
  let clearclock = null
  // averge switchButtons , make it center in horizontally
  let buttonItem = document.querySelector('.switchButtons>ul>li').offsetWidth
  let buttonsLength = document.querySelectorAll('.switchButtons>ul>li').length
  let switchButtons = document.querySelector('.switchButtons')
  switchButtons.style.left = (mainwidth - buttonItem * buttonsLength) / 2 + 'px'
  //the picture move to left or right
  let front = document.querySelector('.front')
  let back = document.querySelector('.back')
  let nextPage = front.onclick = function () {
    let switchList = document.querySelector('.switchList')
    currentLeft = switchList.offsetLeft
    switchList.style.left = -mainwidth + currentLeft + 'px'
    if (currentLeft == -mainwidth * 4) {
      switchList.style.left = '0px'
    }
    flowMove(setpos)
  }
  back.onclick = function () {
    let switchList = document.querySelector('.switchList')
    currentLeft = switchList.offsetLeft
    switchList.style.left = mainwidth + currentLeft + 'px'
    if (currentLeft == 0) {
      switchList.style.left = -mainwidth * 4 + 'px'
    }
    setpos = false
    flowMove(setpos)
  }
  //auto play picture
  navPic.onmouseover = function () {
    clearInterval(clearclock)
  }
  navPic.onmouseout = function () {
    clearclock = setInterval(nextPage, 2000)
  }
  // click button jump to the corresponding picture
  let buttonLists = document.querySelectorAll('.switchButtons>ul>li')
  let switchList = document.querySelector('.switchList')
  for (let i = 0; i < buttonLists.length; i++) {
    buttonLists[i].onclick = function () {
      switchList.style.left = -mainwidth * i + 'px'
    }
  }
  // switch buttons and jsut show red
  let aLists = document.querySelectorAll('.switchButtons>ul>li>a')
  for (let i = 0; i < aLists.length; i++) {
    aLists[i].onclick = function () {
      for (let j = 0; j < aLists.length; j++) {
        if (aLists[j].hasAttribute('class')) {
          aLists[j].removeAttribute('class')
        }
      }
      this.setAttribute('class', 'active')
    }
  }
  // button show red with move of the picture
  function flowMove() {
    if (setpos) {
      index = Math.abs(currentLeft / mainwidth) + 1
      if (index > aLists.length - 1) {
        index = 0
      }
    } else {
      index = Math.abs(currentLeft / mainwidth) - 1
      if (index < 0) {
        index = aLists.length - 1
      }
    }
    for (let i = 0; i < aLists.length; i++) {
      aLists[i].removeAttribute('class')
    }
    aLists[index].setAttribute('class', 'active')
  }
}

carousel.gif

本文作者： moofing

本文链接： https://moofing.gitee.io/posts/b3a983de.html

版权声明： 本文采用 CC BY-NC-SA 4.0进行许可，转载或引用时请遵守该协议

更新于 2021-02-24

practice# carousel
Previous Post
code moonlight && seckill web
Next Post
code moonlight & basic navigation