#banner
    a.pic(href="#")
        img(src="https://drive.google.com/uc?id=1A2sopVlA_1TtV315exT6hit73MHqlpZA")
    a.pic(href="#")
        img(src="https://drive.google.com/uc?id=1dTSgpKE61-kMXju5ZRIR2pmnBJqYmk_g")
    a.pic(href="#")
        img(src="https://drive.google.com/uc?id=1p74EZ9jLitILMc6mZRaMvRqNgr4JtWPG")
View Compiled
body
    background: #191919
    color: #fff
    margin: 0
#banner
    width: 100%
    overflow: hidden
    position: relative
    #pics
        white-space: nowrap
        position: relative
        transition: 0.5s
        left: 0
        .pic
            width: 100%
            display: inline-block
            vertical-align: top
            img
                display: block
                width: 100%
    #dots
        width: 100%
        position: absolute
        left: 0
        bottom: 15px
        text-align: center
        .dot
            display: block
            width: 14px
            height: 14px
            border-radius: 50%
            background: #fff
            display: inline-block
            margin: 0 5px
            cursor: pointer
            &.active
                background: yellow
            @media not all and (hover: none), (-ms-high-contrast: none)
                &:hover
                    background: yellow
    #prev, #next
        width: 50px
        height: 100%
        position: absolute
        top: 0
        cursor: pointer
        display: flex
        align-items: center
        justify-content: center
        transition: .5s
        &::before
            content: ""
            display: block
            background: rgba(#fff, .5)
            width: 30px
            height: 50px
        &#prev
            left: 0
            &::before
                -webkit-clip-path: polygon(100% 0%, calc(100% - 8px) 0%, 0 50%, calc(100% - 8px) 100%, 100% 100%, 8px 50%)
        &#next
            right: 0
            &::before
                -webkit-clip-path: polygon(0% 0%, 8px 0%, 100% 50%, 8px 100%, 0% 100%, calc(100% - 8px) 50%)
        @media not all and (hover: none), (-ms-high-contrast: none)
            &:hover
                background: rgba(0,0,0,.1)
View Compiled
console.clear()

const $Ap = []
const banner = document.getElementById('banner')
const bannerPic = banner.getElementsByClassName('pic')
const bannerLength = bannerPic.length
let index = 0
let change = true

//創建.pics父層並將所有banner圖片推進去
const picWrapper = document.createElement('DIV')
picWrapper.id='pics'
banner.appendChild(picWrapper)
$Ap.forEach.call(bannerPic,()=>{
    picWrapper.appendChild(bannerPic[0])
})

//切換事件
function slider(i) {
    picWrapper.style.left=i*-100+'%'
    index=i
    //清除active與加入active
    $Ap.forEach.call(dot,(e,i)=>{
        e.classList.remove('active')
        dot[index].classList.add('active')
    })
}

//自動撥放
const autoPlayer = setInterval(()=>{
    change
        &&(
            (index>=bannerLength-1?index=0:index++),
            (slider(index))
        )
},5000)
//非touch就觸發暫停
'ontouchend' in document == false
    &&(
        (banner.onmouseenter=()=>change=!change),
        (banner.onmouseleave=()=>change=!change)
    )

//創建.dots父層並將dot推進去
const dots = document.createElement('DIV')
dots.id='dots'
banner.appendChild(dots)
$Ap.forEach.call(bannerPic,()=>{
    let dot = document.createElement('SPAN')
    dot.className='dot'
    dots.appendChild(dot)
})
//dot點擊切換
const dot = dots.getElementsByClassName('dot')
$Ap.forEach.call(dot,(e,i)=>{
    e.onclick=()=>{
        const thisIndex = $Ap.indexOf.call(dot,dot[i])
        slider(thisIndex)
    }
})

//創建.prev,.next左右箭頭
const prev = document.createElement('SPAN')
prev.id='prev'
banner.appendChild(prev)
prev.onclick=()=>slider(index<=0?index=bannerLength-1:index-1)
//.next
const next = document.createElement('SPAN')
next.id='next'
banner.appendChild(next)
next.onclick=()=>slider(index>=bannerLength-1?index=0:index+1)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.