原生js写轮播图(傻瓜式教学)

最新推荐文章于 2023-03-01 16:04:18 发布

居然鼬个高手

最新推荐文章于 2023-03-01 16:04:18 发布

阅读量248

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ny1007/article/details/124960598

版权

HTML结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <!-- 引入公共样式css文件 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入首页css文件 -->
    <link rel="stylesheet" href="./css/demo2.css">
    <!-- 引入字体图标css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- 引入动画函数js文件 -->
    <script src="./js/animate.js"></script>
</head>

<body>
    <div class="focus_box">
        <div class="loop_wrapper">
            <img src="./images/3.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/4.jpg" alt="">
            <img src="./images/5.jpg" alt="">
            <img src="./images/6.jpg" alt="">
            <img src="./images/7.jpg" alt="">
            <img src="./images/8.jpg" alt="">
            <img src="./images/9.jpg" alt="">
        </div>
        <ol></ol>
        <span class="right_arrow iconfont">&#xe8d4;</span>
        <span class="left_arrow iconfont">&#xe667;</span>
    </div>
    <script src="./js/work2.js"></script>
</body>

</html>

CSS样式

.focus_box {
  position: relative;
  margin: 20px auto;
  width: 400px;
  height: 600px;
  overflow: hidden;
}
.focus_box .loop_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000%;
  height: 100%;
}
.focus_box .loop_wrapper img {
  float: left;
  width: 10%;
  height: 100%;
}
.focus_box ol {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.focus_box ol li {
  float: left;
  margin-left: 5px;
  width: 15px;
  height: 15px;
  border-radius: 10px;
  border: 1px solid #333;
  background-color: #fff;
}
.focus_box ol .current {
  background-color: red;
}
.focus_box .right_arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.focus_box .left_arrow {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.focus_box span {
  font-size: 30px;
  color: #333333;
  display: none;
}

动画函数

function animate(obj, target, callback) { //obj指的是目标对象，target指的是目标位置
    clearInterval(obj.timer)
    obj.timer = setInterval(function() {
        // 步长值写在计时器里面
        //把我们的步长值改为整数，不要出现小数，尽量向上取整,如果是负值，就向下取整
        var step = (target - obj.offsetLeft) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        if (obj.offsetLeft === target) {
            clearInterval(obj.timer)
                //回调函数要写在结束计时器后面
            callback && callback()
        }
        //把每次加10改为一个慢慢减小的值，实现减速停止  步长公式：(目标值-现在的位置)/10
        obj.style.left = obj.offsetLeft + step + 'px'
    }, 20)
}

js主题部分

//获取元素
const focus = document.getElementsByClassName('focus_box')[0]
const moveBox = document.getElementsByClassName('loop_wrapper')[0]
const ol = document.getElementsByTagName('ol')[0]
const rightArrow = document.getElementsByClassName('right_arrow')[0]
const leftArrow = document.getElementsByClassName('left_arrow')[0]
let focusWidth = focus.offsetWidth
let time

//添加鼠标经过事件
focus.addEventListener('mouseenter', function() {
        clearInterval(time)
        rightArrow.style['display'] = 'block'
        leftArrow.style['display'] = 'block'
    })
    //添加鼠标离开事件
focus.addEventListener('mouseleave', function() {
        clearInterval(time)
        loop()
        rightArrow.style['display'] = 'none'
        leftArrow.style['display'] = 'none'
    })
    //动态创建小圆点   对图片进行遍历
for (let i = 0; i < moveBox.children.length; i++) {
    let li = document.createElement('li')
    ol.appendChild(li)
    ol.children[0].className = 'current'
        //对小圆点添加点击事件
    li.addEventListener('click', function() {
        //获取点击的小圆点的下标
        let index = li.index = i
            //调用动画函数
        animate(moveBox, -this.index * focusWidth)
            //排他思想
        for (let j = 0; j < ol.children.length; j++) {
            ol.children[j].className = ''
            this.className = 'current'
        }
    })
}
let n = 0,
    circle = 0
    //复制第一张图片插入到最后
let first = moveBox.children[0].cloneNode(true)
moveBox.appendChild(first)
let len = moveBox.children.length - 1
let flag = true
    //给右键添加点击事件
rightArrow.addEventListener('click', function() {
        if (flag) {
            flag = false
            if (n === len) {
                n = 0
                moveBox.style.left = 0
            }
            n++
            circle++
            circle = circle === ol.children.length ? 0 : circle
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].className = ''
            }
            ol.children[circle].className = 'current'
            animate(moveBox, -n * focusWidth, function() {
                flag = true
            })
        }
    })
    //给左键添加点击事件
leftArrow.addEventListener('click', function() {
    if (flag) {
        flag = false
        if (n === 0) {
            n = len
            moveBox.style.left = -n * focusWidth + 'px'
        }
        n--
        circle--
        circle = circle < 0 ? ol.children.length - 1 : circle
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
        }
        ol.children[circle].className = 'current'
        animate(moveBox, -n * focusWidth, function() {
            flag = true
        })
    }
})

//自动播放

function loop() {
    time = setInterval(function() {
        rightArrow.click()
    }, 2000)
}
loop()

效果

loop

居然鼬个高手

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js写轮播图(傻瓜式教学)

HTML结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
复制链接

扫一扫