js + css實現 一看就懂的輪播圖
emmmmm，記得幾個月前入職面試的時候，面試官問我，你可以手寫一個簡單的輪播圖麼？我弱弱地答道：不會……
ok，這真的是一個簡單的輪播圖，主要是透過ul > li > img 其display屬性的none or block來控制的。下次改進會增加動畫效果。
先看程式碼吧
HTML
<！DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
“utf-8”
/>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“IE=edge”
>
<
title
>
image scroll
title
>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1”
>
<
link
rel
=
“stylesheet”
type
=
“text/css”
media
=
“screen”
href
=
“carousel。css”
/>
head
>
<
body
>
<
div
id
=
“banner”
>
<
div
id
=
“pic”
>
<
ul
>
<
li
><
img
src
=
“。/images/1。jpeg”
>
li
>
<
li
><
img
src
=
“。/images/2。jpg”
>
li
>
<
li
><
img
src
=
“。/images/3。jpg”
>
li
>
<
li
><
img
src
=
“。/images/4。jpg”
>
li
>
<
li
><
img
src
=
“。/images/5。jpeg”
>
li
>
ul
>
div
>
<
div
id
=
“btn”
>
<
div
id
=
“left”
>
<；
div
>
<
div
id
=
“right”
>
>；
div
>
div
>
<
div
id
=
“tap”
>
<
ul
>
<
li
class
=
“active”
>
li
>
<
li
>
li
>
<
li
>
li
>
<
li
>
li
>
<
li
>
li
>
ul
>
div
>
div
>
<
script
src
=
“carousel。js”
>
script
>
body
>
html
>
說明 這裡的images下載的是淘寶官網首頁的那五張輪播圖，其有固定的尺寸，所以css也好設定和計算
CSS
我這裡是用sass寫的，然後命令列轉換一下，掌握一門css工具語言真的能節省不少程式碼呢
@mixin
transparentBg
（
$bg-color
，
$rgb
）
{
background
：
$bg-color
；
background
：
rgba
（
$rgb
，
$rgb
，
$rgb
，
。5
）
；
}
@mixin
ulStyle
（
$display
：
block
）
{
margin
：
0
；
padding
：
0
；
list-style
：
none
；
display
：
$display
；
}
@mixin
font
（
$font-size
：
16
px
，
$font-weight
：
400
，
$color
：
black
）
{
font-size
：
$font-size
；
font-weight
：
$font-weight
；
color
：
$color
；
}
@mixin
wAndH
（
$width
，
$height
）
{
width
：
$width
；
height
：
$height
；；
}
#banner
{
border
：
1
px
solid
red
；
margin
：
100
px
auto
；
position
：
relative
；
@
include
wAndH
（
520px
，
280px
）；
#pic
{
width
：
100
%
；
height
：
100
%
；
ul
{
overflow
：
hidden
；
@
include
ulStyle
（
flex
）；
}
}
#btn
>
div
{
line-height
：
36
px
；
cursor
：
pointer
；
text-align
：
center
；
position
：
absolute
；
top
：
50
%
；
margin-top
：
-18
px
；
@
include
wAndH
（
23px
，
36px
）；
@
include
font
（
18px
，
700
，
#fff
）；
@
include
transparentBg
（
#fff
，
0
）；
&
［
id
=
“left”
］
{
left
：
0
；
}
&
［
id
=
“right”
］
{
right
：
0
；
}
}
#tap
{
position
：
absolute
；
bottom
：
14
px
；
left
：
50
%
；
margin-left
：
-35
px
；
border-radius
：
7
px
；
@
include
wAndH
（
70px
，
14px
）；
@
include
transparentBg
（
#fff
，
255
）；
ul
{
@
include
ulStyle
（
flex
）；
li
{
background
：
#999
；
border-radius
：
100
%
；
margin
：
2
px
；
cursor
：
pointer
；
@
include
wAndH
（
10px
，
10px
）；
&
［
class
=
“active”
］
{
background
：
#f60
；
}
}
}
}
}
JS
這裡的js就是原生的js程式碼拉，不過document初始化的方法還要完善，這裡只考慮了chrome，safari瀏覽器，如果是ie就不行了。
document
。
addEventListener
（
‘DOMContentLoaded’
，
function
（）
{
// 獲取tab dots 這時的tabLis是個類陣列的物件
const
tabLis
=
document
。
getElementById
（
‘tap’
）。
getElementsByTagName
（
‘li’
），
oUl
=
document
。
getElementById
（
‘pic’
）。
getElementsByTagName
（
‘ul’
）［
0
］，
imgs
=
document
。
getElementById
（
‘pic’
）。
getElementsByTagName
（
‘img’
），
leftBtn
=
document
。
getElementById
（
‘left’
），
rightBtn
=
document
。
getElementById
（
‘right’
）；
// tap bar 點選時dot的背景色改變，並且顯示對應的圖片
// 圖片顯示的index，同時也是tap bar dot顯示的index，預設0開始，
let
imgIndex
=
0
；
Array
。
from
（
tabLis
）。
forEach
（（
li
，
index
）
=>
{
li
。
addEventListener
（
‘click’
，
function
（）
{
// 上次點選的class 清空，並且圖片顯示設定為none
tabLis
［
imgIndex
］。
className
=
‘’
；
imgs
［
imgIndex
］。
style
。
display
=
‘none’
；
// 本次點選的class 加上 active，並且圖片顯示設定為block
li
。
className
=
‘active’
；
// this。className = ‘active’
imgs
［
index
］。
style
。
display
=
‘block’
；
// 儲存上次點選的index
imgIndex
=
index
；
}）
}）
// 點選左箭頭
leftBtn
。
addEventListener
（
‘click’
，
function
（）
{
// 左箭頭先判斷imgIndex是否為0，如果為0，則點選無效
if
（
imgIndex
==
0
）
{
return
；
}
imgs
［
imgIndex
］。
style
。
display
=
‘none’
；
// 儲存上次點選的index
const
lastIndex
=
imgIndex
；
imgIndex
——
；
// 儲存當前的index
const
currentIndex
=
imgIndex
；
// 呼叫啟用dot函式
activeDot
（
tabLis
，
lastIndex
，
currentIndex
）；
imgs
［
imgIndex
］。
style
。
display
=
‘block’
；
}）
// 點選右箭頭
rightBtn
。
addEventListener
（
‘click’
，
function
（）
{
// 右箭頭先判斷imgIndex是否為 imgIndex。length - 1，如果是，則點選無效
if
（
imgIndex
==
imgs
。
length
-
1
）
{
return
；
}
imgs
［
imgIndex
］。
style
。
display
=
‘none’
；
// 儲存上次點選的index
const
lastIndex
=
imgIndex
；
imgIndex
++
；
// 儲存當前的index
const
currentIndex
=
imgIndex
；
// 呼叫啟用dot函式
activeDot
（
tabLis
，
lastIndex
，
currentIndex
）；
imgs
［
imgIndex
］。
style
。
display
=
‘block’
；
}）
}）
/**
* 點選左右箭頭的時候，同時active tap bar中的dot
*/
function
activeDot
（
tabLis
，
lastIndex
，
currentIndex
）
{
tabLis
［
lastIndex
］。
className
=
‘’
；
tabLis
［
currentIndex
］。
className
=
‘active’
；
}
效果圖
待續……