DOM高级轮播图

最新推荐文章于 2024-07-22 08:55:10 发布

Almee211

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量113

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/Almee211/article/details/120000081

版权

JavaScript 动画轮播图函数封装事件处理

关键词由CSDN通过智能技术生成

将运动封装成函数

function animate(ele, obj, fn=function(){}){
    var num = 0
    var k = 0
    for(let attr in obj){
        num++
        let target = obj[attr]
        let l = getStyle(ele, attr);
        if(attr === 'opacity'){
            l *= 100
            target *= 100
        }
        l = parseInt(l)
        let timerId = setInterval(function(){
            var speed = (target - l) / 10
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            l += speed;
            if(attr === 'opacity'){
                ele.style[attr] = l / 100
            }else{
                ele.style[attr] = l + 'px'
                // console.log(l);
            }
            if(l===target){
                l = target
                // 当当前要设置的值跟目标值相等了，设置最后一次
                // if(attr === 'opacity'){
                //     ele.style[attr] = l / 100
                // }else{
                //     ele.style[attr] = l + 'px'
                //     console.log(l);
                // }
                clearInterval(timerId)
                k++
                if(num === k){
                    fn()
                }
            }
            // 希望fn调用，是所有运动结束以后执行的函数 - 但可惜现在不是
            // 因为上面的if执行结束后，还会执行下面的代码
            // 为了保证fn是最后执行的代码 - 给上面的if添加else，将下面的代码放在else中
            
            // else{
            //     // // 如果这样做了，目标是1200，最终只会走到1199，因为上面条件成立的时候，当目标值 === 1200 的时候，当前的left值还是1199，没有设置最后一个1200
            //     // if(attr === 'opacity'){
            //     //     ele.style[attr] = l / 100
            //     // }else{
            //     //     ele.style[attr] = l + 'px'
            //     //     console.log(l);
            //     // }
            // }
        },20)
    }
}
// 获取样式的函数
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return getComputedStyle(ele)[attr]
    }else{
        return ele.currentStyle[attr]
    }
}

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    section {
      width: 500px;
      height: 400px;
      overflow: hidden;
      margin: 50px auto;
      position: relative;
    }
    #left {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 0;
      top: 180px;
    }
    #rig {
      width: 50px;
      height: 50px;
      position: absolute;
      right: 0;
      top: 180px;
    }
    div {
      width: 100px;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      top: 270px;
      left: 50%;
      transform: translateX(-50%);
    }
    figure {
      width: 10px;
      height: 10px;
      border: 1px solid black;
      border-radius: 50%;
      background: pink;
    }
    nav img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <section>
    <img src="img/左箭头.png" id="left">
    <img src="img/右箭头.png" id="rig">
    <nav>
      <img src="img/img1.jpg">
    </nav>
    <div>
      <figure style="background: red;"></figure>
      <figure></figure>
      <figure></figure>
    </div>
  </section>
</body>
<script>
  var k = 0
  var navs = document.querySelector('nav')
  var fig = document.querySelectorAll('figure')
  var timerId
  //按左箭头实现功能
  left.onclick = function () {
    k--
    if (k === -1) {
      k = 2
    }
    var str = '<img src="img/img' + (k + 1) + '.jpg">'
    navs.innerHTML = str
    for (var i = 0; i < fig.length; i++) {
      fig[i].style.background = ''
    }
    fig[k].style.background = 'red'
  }
  //按右箭头实现功能
  rig.onclick = function () {
    k++
    if (k === 3) {
      k = 0
    }
    var str = '<img src="img/img' + (k + 1) + '.jpg">'
    navs.innerHTML = str
    for (var i = 0; i < fig.length; i++) {
      fig[i].style.background = ''
    }
    fig[k].style.background = 'red'
  }
  //点击下方小点实现图片切换
  for (let i = 0; i < fig.length; i++) {
    fig[i].onclick = function () {
      for (var j = 0; j < fig.length; j++) {
        fig[j].style.background = ''
      }
      fig[i].style.background = 'red'
      var str = '<img src="img/img' + (i + 1) + '.jpg">'
      navs.innerHTML = str
      k = i
    }
  }
  var sec = document.querySelector('section')
  //自动轮播
  timerId = setInterval(function () {
    k++
    if (k === 3) {
      k = 0
    }
    console.log(k);
    var str = '<img src="img/img' + (k + 1) + '.jpg">'
    navs.innerHTML = str
    for (var m = 0; m < fig.length; m++) {
      fig[m].style.background = ''
    }
    fig[k].style.background = 'red'
  }, 1000)
  //当鼠标移入section时，停止定时器
  sec.onmouseover = function () {
    clearInterval(timerId)
  }
 //当鼠标移入section时，启动定时器
 sec.onmouseout = function(){
  timerId = setInterval(function () {
    k++
    if (k === 3) {
      k = 0
    }
    console.log(k);
    var str = '<img src="img/img' + (k + 1) + '.jpg">'
    navs.innerHTML = str
    for (var m = 0; m < fig.length; m++) {
      fig[m].style.background = ''
    }
    fig[k].style.background = 'red'
  }, 1000)
 }
</script>
</html>

Almee211

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM高级轮播图

将运动封装成函数functionanimate(ele,obj,fn=function(){}){varnum=0vark=0for(letattrinobj){num++lettarget=obj[attr]letl=getStyle(ele,attr);if(attr==='opacity'){l*=100...
复制链接

扫一扫

DOM高级 轮播图

DOM高级轮播图