-javascript,

純javascript 輪播

  1. 綁定每個輪播的區域：
  2. 設置輪播圖容器：
  3. 定義輪播的區域有幾個與索引從第0個開始：
  4. 設置一定時間重複setinterval函式：獲取當前索引，獲取下一個輪播圖的索引,取於防止超出範圍，讓當前輪播圖項左移出屏幕，讓下一個輪播圖向左進入屏幕；style.transition與style.transform＝>translateX 的使用
  5. 移動結束後，設置下一張輪播圖位置，準備下一次移動setTimeout 函式的使用
1
2
3
4
5
6
7
8
//html
 <div class="carousel">
    <div class="carousel_inner">
        <div class="carousel_item" style="background-color: aqua;"></div>
        <div class="carousel_item"
        style="background-color: yellow;"></div>
    </div>
 </div>

Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body{
    margin:0;
    padding:0;
}

.carousel_inner{
     width: 100vw;
    overflow: hidden;
}

.carousel_item{
     width: 100vw;
    height: 100vw;
}

JavaScript.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
// 綁定carouselItem
let carouselItem =document.getElementsByClassName("carousel_item");
// 取得寬度
let width = carouselItem[0].clientWidth;
// 算出carouselItem有幾個
let lenth = carouselItem.length;
// 容器
let carouselInner = document.getElementsByClassName("carousel-inner");
carouselInner[0].style.width =`${ width * length }px`;

let i = 0;

// 每個輪播元素一定時間重複
setInterval(() =>
    // 獲取當前索引
    let current = i % lenth;
    console.log('獲取當前索引',current);
    let next = (i + 1) % lenth;
    console.log('獲取下一個輪播圖的索引',next);
    // 塞入當前的 translateX位置
    carouselItem[current].style.transform = `translateX(${0 - (current + 1) * width}px)`;
    // 塞入下一頁的 translateX位置
    carouselItem[next].style.transform = `translateX(${0 - ((current + 1) % lenth) * width}px)`;
    i++;
     // 移動結束後，設置下一張輪播圖位置，準備下一次移動
      setTimeout(() => {
        carouselItem[current].style.transition = "";
        carouselItem[next].style.transition = "";

        // 輪播每個元素
        for(let j = 0; j < lenth; j++){
            // 當前元素不變
            if(j == i % lenth) continue;
            if(j < i % lenth) {
                // 当前元素左邊的元素按順序移動放置到列表的后面做進行準備
                carouselItem[j].style.transform = `translateX(${(lenth - j - i % lenth) * width}px)`;
            }
            else{
                // 当前元素右邊的元素移動到當前元素的後面，防止輪播圖切換时中間有留白
                carouselItem[j].style.transform = `translateX(${0 - ((current + 1) % lenth) * width}px)`;
            }
        }
        i %= lenth;
      },800)
},2000)

js 輪播 加左右鍵與引導按鈕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//html
<div class="banner_container">
    <ul class="img_box">
        <li><img src="https://cdn.pixabay.com/photo/2024/04/13/11/29/muffins-8693748_1280.jpg" alt=""></li>
        <li><img src="https://cdn.pixabay.com/photo/2023/07/04/17/13/mallow-8106680_1280.jpg" alt=""></li>
        <li><img src="https://cdn.pixabay.com/photo/2024/01/04/09/01/bird-8486864_1280.jpg" alt=""></li>
        <li><img src="https://cdn.pixabay.com/photo/2024/05/15/07/59/flowers-8763039_1280.jpg" alt=""></li>
        <li><img src="https://cdn.pixabay.com/photo/2020/06/24/19/50/garden-5337535_1280.jpg" alt=""></li>
        <li><img src="https://cdn.pixabay.com/photo/2024/05/26/10/15/bird-8788491_1280.jpg" alt=""></li>
    </ul>
    <!--引導-->
    <ul class="sel_box">
        <li data-index="0"></li>
        <li data-index="1"></li>
        <li data-index="2"></li>
        <li data-index="3"></li>
    </ul>
    <!--左右鍵-->
    <div class="left_btn"><</div>
    <div class="right_btn">></div>
</div>

Css

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
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.banner_container {
    position: relative;
    margin: 100px;
    width: 400px;
    height: 250px;
    overflow: hidden;  
}

ul.img_box {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-400px);
}

.img_box li {
    float: left;
    list-style: none;
}


.img_box li img {
    width: 400px;
}


.sel_box {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.sel_box li {
    list-style: none;
 
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: pink;
    margin-right: 3px;
    border-radius: 5px;
    transition: all 0.4s;
}


.left_btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 25px;
    height: 30px;
    background-color: #fff;
    line-height: 30px;
    padding-left: 3px;

    cursor: pointer;
}

.right_btn {
    position: absolute;
    top: 50%;
    left: 375px;
    transform: translateY(-50%);
    width: 25px;
    height: 30px;
    background-color: #fff;
    line-height: 30px;
    padding-left: 5px;
    cursor: pointer;
}



.sel_box .cur {
    background-color: red!important;
    transform: scale(1.3);
}

JavaScript

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
//綁定圖片Box
let img_box = document.querySelector('.img_box');
let imgs = document.querySelectorAll('img');

//綁定引導Box
let sel_box = document.querySelector('.sel_box')
let lis = sel_box.querySelectorAll('li');

//左右按鈕
let left_btn = document.querySelector('.left_btn');
let right_btn = document.querySelector('.right_btn');

//索引第幾張
let index = 0;  
let timer = null;  

//設置容器大小
let imgContainerW = img_box.offsetWidth
img_box.style.width = imgContainerW * imgs.length + 'px'
//設置容器位置
img_box.style.left = 0 + 'px';

//設置第一個小圖為當前按鈕
lis[0].className = 'cur'

//輪播切換
const swapImg =() =>{
   
    img_box.style.left = -index * imgContainerW + 'px';
   
    for (let i = 0; i < lis.length; i++) {
        lis[i].className = '';
    }
   
    lis[index].className = 'cur'
}

const swapFormat =() =>{
    index++;  
   
    if (index >= 4) {
       
        index = 4;  
        img_box.style.transition = 'all, linear, 1s';
        img_box.style.left = -index * imgContainerW + 'px';
        for (let i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
      
        lis[0].className = 'cur'
    
       //通過定時器立馬切換到第一張
        setTimeout(()=>{
            index = 0;  
            img_box.style.transition = '';  
            swapImg();
        }, 1500)
    
        
    } else {
        img_box.style.transition = 'all, linear, 1.5s';
        swapImg();
    }
}
//
timer = setInterval(swapFormat, 3000)

//右按鈕 ＝>自動播放
right_btn.addEventListener('click', ()=>{
    swapFormat();
})

//左按鈕
left_btn.addEventListener('click', () =>{
    index--;
 
    if (index < 0) {
        index = -1
        img_box.style.transition = 'all, linear, 1.5s';
        img_box.style.left = -index * imgContainerW + 'px';
        for (let i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
  
        lis[3].className = 'cur'
    

        setTimeout(()=>{
            index = 3
            img_box.style.transition = '';
            swapImg();
        }, 1000)
    
    } else {
        img_box.style.transition = 'all, linear, 1.5s';
        swapImg();
    }
})


img_box.addEventListener('mouseover', () =>{
    clearInterval(timer)
})

right_btn.addEventListener('mouseover', () =>{
    clearInterval(timer)
})

left_btn.addEventListener('mouseover', () =>{
    clearInterval(timer)
})


img_box.addEventListener('mouseout', ()=> {
    timer = setInterval(swapFormat, 3000)
})

left_btn.addEventListener('mouseout', ()=> {
    timer = setInterval(swapFormat, 3000)
})

right_btn.addEventListener('mouseout', () =>{
    timer = setInterval(swapFormat, 3000)
})