轮播图的两种实现

2019-10-25
#前端

跳转切换

  • 1
  • 2
  • 3

通过定时器，窗口每次只展示一张图，其余隐藏

1
2
3
4
5
6
7
8
9
10
<div id="box">
    <div class="inner"><img src="src/1.jpeg"></div>
    <div class="inner"><img src="src/2.jpeg"></div>
    <div class="inner"><img src="src/3.jpeg"></div>
</div>
<ul id="pointer">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
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
var img = document.querySelectorAll("img"); 
var ul = document.getElementById("pointer");
var li = document.querySelectorAll("li");
var index = 0;        // 当前展示的图片索引

function show (x) {   // 渲染显示第x个图片
    for (let i=0; i<img.length; i++) {
        img[i].style.display = "none";    // 隐藏全部
        li[i].style.backgroundColor = "";  
    }
    img[x].style.display = "block";       // 只显示x
    li[x].style.backgroundColor = "brown"; 
}
function scroll () {  
    show(index);
    index++; 
    if (index == img.length) index = 0;
};
var timer = setInterval(scroll, 1000); 

// 为li添加index属性，方便追踪
for (let i=0; i<img.length; i++) {
    li[i].index = i;
}
// 事件委托,监听ul
// 鼠标点击tag,轮播暂停,跳转到对应图片
ul.onclick = function (event) { 
    if (event.target.index){
        clearInterval(timer);  
        show(event.target.index);
        timer = setInterval(scroll, 1000);
        index = event.target.index;
    }
}
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
* {
    margin: 0;
    padding: 0;
}
#box {
    width: 400px;
    height: 200px;
    margin: 0 auto;
}
img {
    width: 400px;
    height: 200px;
}	
.inner {
    position: absolute;
    margin-top: 0;
}
ul {
    width: 200px;
    height: 15px;
    margin: 0 auto;
    font-size: 10px; 
    text-align: center;
}
li {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    border-radius: 50%;
    margin: 0 10px;
}



滑动切换

  • 1
  • 2
  • 3

图片衔接成一行，通过定时器，每次左移一张图片，使其暴露于窗口

1
2
3
4
5
6
7
<div id="box">
    <div id="inner">
        <img src="src/1.jpeg" />
        <img src="src/2.jpeg" />
        <img src="src/3.jpeg" />  
    </div>
</div>
1
2
3
4
5
6
7
8
9
var inner = document.getElementById("inner");
var imgWidth = 400+5; // 图片衔接处的白边宽5px

function show (x) {
    inner.style.transform = `translateX(-${x*imgWidth}px)`; // 左移x张图的宽度
    for(let i = 0; i< li.length; i++)
        li[i].style.backgroundColor = "";
    li[x].style.backgroundColor = "pink";
}
1
2
3
4
5
6
7
8
9
10
11
12
#box {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    position: relative;  
    overflow: hidden;
}
#inner {
    width: 1230px; /* 图片衔接处会有白边，总长需>3*图宽,否则最后一张图无法显示 */
    height: 200px;
    transition: transform 1s;
}