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

废话不多说,直接上代码(注: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)

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

相关推荐
y先森31 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy31 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891134 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
emmm4593 小时前
html兼容性问题处理
html
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js