无缝轮播图(自动轮播+点击轮播+拖拽轮播)

废话不多说,直接上代码(注:js部分代码会有截图对其解释)

一、HTML

html 复制代码
    <div class="bigBox">
        <!-- 轮播主体 -->
        <div class="box">
            <div class="littleBox">1</div>
            <div class="littleBox">2</div>
            <div class="littleBox">3</div>
        </div>
        <!-- 底部小点 -->
        <div class="point">
            <div class="active"></div>
            <div></div>
            <div></div>
        </div>
        <!-- 上一页 -->
        <div class="prev"></div>
        <!-- 下一页 -->
        <div class="next"></div>
    </div>

二、CSS

css 复制代码
* {
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 300px;
    height: 180px;
    border: 2px solid black;
    overflow: hidden;
    margin: 100px auto;
    position: relative;
}

/* 轮播主体 */
.box {
    width: 900px;
    display: flex;
    transition: all .6s;
}

.littleBox {
    text-align: center;
    line-height: 180px;
    width: 300px;
    height: 180px;
}

.littleBox:nth-of-type(1) {
    background-color: skyblue;
}

.littleBox:nth-of-type(2) {
    background-color: pink;
}

.littleBox:nth-of-type(3) {
    background-color: yellow;
}

/* 小点 */
.point {
    position: absolute;
    width: 50px;
    height: 10px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    cursor: pointer;
}

.point div {
    width: 10px;
    height: 10px;
    background-color: rgb(151, 151, 151);
    border-radius: 10px;
}

.point .active {
    background-color: white;
}

/* 上一页/下一页 */
.prev::after,
.next::after {
    position: absolute;
    width: 20px;
    height: 30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: aliceblue;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

/* 上一页 */
.prev::after {
    content: '<';
    left: 0;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* 下一页 */
.next::after {
    content: '>';
    right: 0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

三、JS以及解释截图

javascript 复制代码
// dom元素
const doms = {
    box: document.querySelector('.box'),
    point: document.querySelectorAll('.point div'),
    prev: document.querySelector('.prev'),
    next: document.querySelector('.next')
}

// 当前所在页面(从0开始)
let currentIndex = 0

// 切换页面
function moved(index) {
    currentIndex = index
    const x = -300 * index
    doms.point.forEach((item, i) => {
        item.classList.remove('active')
    })
    doms.point[index].classList.add('active')
    doms.box.style.transform = `translateX(${x}px)`
}

// 上一页点击事件
function changePrev() {
    currentIndex === 0 ? currentIndex = 2 : currentIndex--
    moved(currentIndex)
}
doms.prev.addEventListener('click', changePrev)

// 下一页点击事件
function changeNext() {
    currentIndex === 2 ? currentIndex = 0 : currentIndex++
    moved(currentIndex)
}
doms.next.addEventListener('click', changeNext)

// 小点点击事件
doms.point.forEach((item, i) => {
    item.addEventListener('click', function () {
        moved(i)
    })
})

// 自动轮播
let timer = setInterval(changeNext, 2000)

// 鼠标移入后清除自动轮播
doms.box.addEventListener('mouseenter', function () {
    clearInterval(timer)
})

// box元素相对视口的位置
const boxPosition = {
    x: Math.floor(doms.box.getBoundingClientRect().x),
    y: Math.floor(doms.box.getBoundingClientRect().y)
}

// 鼠标最初位置
let mouseX = 0

// box移动的位置
let transformX = 0
let x = 0

// 手动拖拽
function onMoueseDown(e) {
    mouseX = e.clientX - boxPosition.x
    doms.box.addEventListener('mousemove', onMoueseMove)
}

function onMoueseMove(e) {
    e.preventDefault()
    x = transformX + -1 * (mouseX - (e.clientX - boxPosition.x));
    doms.box.style.transform = `translateX(${x}px)`
}

function onMoueseUp() {
    // 判断当前页数
    if (Math.round(-1 * x / 300) < 0) {
        currentIndex = 2
    } else if (Math.round(-1 * x / 300) > 2) {
        currentIndex = 0
    } else {
        currentIndex = Math.round(-1 * x / 300)
    }
    transformX = currentIndex * -300
    moved(currentIndex)
    // 移出监听
    doms.box.removeEventListener('mousemove', onMoueseMove)
}


function onMoueseLeave() {
    // 移出监听
    doms.box.removeEventListener('mousemove', onMoueseMove)
    // 添加自动轮播
    timer = setInterval(changeNext, 2000)
}
// 鼠标按下添加拖拽
doms.box.addEventListener('mousedown', onMoueseDown)

// 鼠标抬起移除事件
doms.box.addEventListener('mouseup', onMoueseUp)
// 鼠标移出后添加自动轮播以及移出事件
doms.box.addEventListener('mouseleave', onMoueseLeave)

解释截图(最左侧为可视窗口最左侧):

相关推荐
栈老师不回家几秒前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙6 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠10 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds30 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js