2021-04-10

最新推荐文章于 2022-05-17 14:03:49 发布

真棒子晓

最新推荐文章于 2022-05-17 14:03:49 发布

阅读量130

点赞数

分类专栏： javascript案例文章标签： html5 css3 css

本文链接：https://blog.csdn.net/qq_51747477/article/details/115570816

版权

javascript案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

京东轮播图切换案例分析

一、功能分析（运用到动画函数，改变ul的left的值）

1、鼠标移动到小圆圈时切换图片为下一张，并且当前小圆圈的背景色为白色，其余全部为红色**（onmouseover,排他思想技术）**
查看ul是否有left定位，没有需要添加。
给在这里插入图片描述

2、鼠标点击左右则按钮时实现无缝滚动，切换图片为下一张**（onclick事件）**
//左侧按钮切换（无缝滚动）
var lt=document.querySelector(’.tab-lt’);
var num=0//设置个参数控制ul
var cir=0;//控制小圆圈和按钮同步
var flag=true;//节流阀
//无缝滚动（最后复制第一张图片cloneNode）
var fist=ul.children[0].cloneNode(true);
ul.appendChild(fist);
lt.addEventListener(‘click’,function(){
if(flag=true){
flag=false;
if(num==0){
num=lis.length;//赋值为0循环切换
//如果当num为8时将ul的left的值赋值=0
ul.style.left=-(numbowidth)+‘px’;
}
num–;
animate(ul,-numbowidth,function(){
flag=true;
});
cir–;
if (cir<0) {
cir = ciror.children.length-1;
}
for (var i = 0; i < ciror.children.length; i++) {
ciror.children[i].className= ‘’;

    }
    ciror.children[cir].className ='counter';
  }

})

//右侧按钮切换（无缝滚动）
var rt=document.querySelector('.tab-rt');

rt.addEventListener('click',function(){
    if(flag){
        flag=false;
        if(num==lis.length-1){
      //如果当num为8时将ul的left的值赋值=0
      ul.style.left=0+'px';
      num=0;//赋值为0循环切换
      }
     num++;
    animate(ul,-num*bowidth,function(){
        flag=true;
    });
    cir++;
    if (cir ==ciror.children.length) {
        cir = 0;
    }
    for (var i = 0; i < ciror.children.length; i++) {
        ciror.children[i].className= '';

    }
    ciror.children[cir].className ='counter';
    }

})
3、自动播放功能
//自动播放功能(调用右按钮的点击事件)
bo.addEventListener(‘mouseover’,function(){
clearInterval(timer);
timer=null;
})
bo.addEventListener(‘mouseleave’,function(){
timer=setInterval(function(){
//调用右切换
rt.click();
},3000)
})

var timer=setInterval(function(){
//调用右切换
rt.click();
},3000)

//节流阀

// 1、不让图片切换太快，当上一张图片动画加载完，后用动画函数的回调函数处理

二、轮播图问题分析及解决方案

1、小圆圈的个数，必须与图片个数相同既是与**（ul 里面的小li个数相等。）** 通过创建元素节点，将节点元素插入到父节点中**（creatElement,appendChild）**

在这里插入图片描述
1.1将布局好的小圆圈删除.

1.2通过js创建节点a***(尽量用父元素节点获取孩子节点)***
**var lis=document.querySelectorAll(‘li’);
var ciror=document.querySelector(’.ciror’);
for(var i=0;i<lis.length;i++){

        ***var as=document.createElement('a');
       ciror.appendChild(as);//插入元素节点a**

在这里插入代码片
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210410132802275.png)
2、节流阀，控制图片等待上一张图片加载完，后在动画函数中，添加回调函数，防止点击过快
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210410161909693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxNzQ3NDc3,size_16,color_FFFFFF,t_70)
3、自动播放功能
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210410162006884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxNzQ3NDc3,size_16,color_FFFFFF,t_70)

## 三、整体代码的展示

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .tab-bo {
            position: relative;
            width: 590px;
            height: 470px;
            margin: 200px auto;
            overflow: hidden;
            background-color: pink;
            cursor: pointer;
        }
        
        .tab-bo ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 1000%;
        }
        
        .tab-bo ul li {
            float: left;
            list-style: none;
        }
        
        .tab-bo .tab-lt,
        .tab-rt {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 30px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 22px;
            color: #fff;
            background-color: rgba(0, 0, 0, .15);
            z-index: 3;
        }
        
        .tab-bo .tab-lt {
            left: 0;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        
        .tab-bo .tab-rt {
            right: 0;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        
        .tab-bo .ciror {
            position: absolute;
            bottom: 20px;
            left: 30px;
            height: 12px;
        }
        
        .tab-bo .ciror a {
            float: left;
            display: block;
            width: 6px;
            height: 6px;
            border: 3px solid #ccc;
            margin-right: 8px;
            border-radius: 12px;
            background-color: red;
        }
        
        .tab-bo .ciror a.counter {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="tab-bo">
        <div class="tab-lt">
            <</div>
                <div class="tab-rt">></div>
                <ul class="tab-ul">
                    <li>
                        <a href="#"></a>
                        <img src="C:\code.html\JS-Web-APIs\imeages\w1.webp.jpg" alt="">
                    </li>
                    <li>
                        <a href="#"></a>
                        <img src="C:\code.html\JS-Web-APIs\imeages\w2.jpg" alt="">
                    </li>
                    <li>
                        <a href="#"></a>
                        <img src=C:\code.html\JS-Web-APIs\imeages\w3.webp.jpg " alt=" ">
                    </li>
                    <li>
                        <a href="# "></a>
                        <img src="C:\code.html\JS-Web-APIs\imeages\w4.jpg " alt=" ">
                    </li>
                    <li>
                        <a href="# "></a>
                        <img src="C:\code.html\JS-Web-APIs\imeages\w5.jpg " alt=" ">
                    </li>
                    <li>
                        <a href="# "></a>
                        <img src="C:\code.html\JS-Web-APIs\imeages\w6.jpg " alt=" ">
                    </li>
                    <li>
                        <a href="# "></a>
                        <img src="C:\code.html\JS-Web-APIs\imeages\w7.jpg " alt=" ">
                    </li>
                    <li>
                        <a href="# "></a>
                        <img src="C:\code.html\JS-Web-APIs\imeages\w8.jpg " alt=" ">
                    </li>
                </ul>
                <div class="ciror ">
                    
                </div>
        </div>
<script>
    //动画函数
    function animate(obj, target, back) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var step = (target - obj.offsetLeft) / 10;
        var step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (back) { //调用函数
                back();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30)
}
//小圆圈模块图片切换
    var lis=document.querySelectorAll('li');
    var bo=document.querySelector('.tab-bo');
      var ciror=document.querySelector('.ciror');
      var ul=document.querySelector('.tab-ul');
      var bowidth=bo.offsetWidth;
      for(var i=0;i<lis.length;i++){
            var as=document.createElement('a');
             ciror.appendChild(as);//插入元素节点a
            as.setAttribute('index' ,i); //给a设置自定义属性
            as.addEventListener('mouseover',function(){  //给每一个a节点绑定事件
         for(var i=0;i<ciror.children.length;i++){
            ciror.children[i].className='';
             }
          this.className='counter';
          //调用动画函数切换图片,ul为移动源，找到移动距离计算target=-index*li的宽度
          //给每个小圆圈设置定义属性索引号index
          var index=this.getAttribute('index');//获取小a的索引号
        num=index;
        cir=index;
          console.log(index);
          console.log(bowidth);
          animate(ul,-index*bowidth);
         })   
          
      }
      ciror.children[0].className='counter';
      
  //左侧按钮切换（无缝滚动）
  var lt=document.querySelector('.tab-lt');
  var num=0//设置个参数控制ul
  var cir=0;//控制小圆圈和按钮同步
  var flag=true;//节流阀
  //无缝滚动（最后复制第一张图片cloneNode）
  var fist=ul.children[0].cloneNode(true);
  ul.appendChild(fist);
  lt.addEventListener('click',function(){
      if(flag=true){
          flag=false;
        if(num==0){
        num=lis.length;//赋值为0循环切换
          //如果当num为8时将ul的left的值赋值=0
          ul.style.left=-(num*bowidth)+'px';
          }
         num--;
        animate(ul,-num*bowidth,function(){
            flag=true;
        });
        cir--;
        if (cir<0) {
            cir = ciror.children.length-1;
        }
        for (var i = 0; i < ciror.children.length; i++) {
            ciror.children[i].className= '';

        }
        ciror.children[cir].className ='counter';
      }
     
  })

    //右侧按钮切换（无缝滚动）
    var rt=document.querySelector('.tab-rt');

    rt.addEventListener('click',function(){
        if(flag){
            flag=false;
            if(num==lis.length-1){
          //如果当num为8时将ul的left的值赋值=0
          ul.style.left=0+'px';
          num=0;//赋值为0循环切换
          }
         num++;
        animate(ul,-num*bowidth,function(){
            flag=true;
        });
        cir++;
        if (cir ==ciror.children.length) {
            cir = 0;
        }
        for (var i = 0; i < ciror.children.length; i++) {
            ciror.children[i].className= '';

        }
        ciror.children[cir].className ='counter';
        }
    
  })

    //自动播放功能(调用右按钮的点击事件)
  bo.addEventListener('mouseover',function(){
      clearInterval(timer);
      timer=null;
  })
bo.addEventListener('mouseleave',function(){
    timer=setInterval(function(){
        //调用右切换
       rt.click();
    },3000)
})
    
var timer=setInterval(function(){
        //调用右切换
       rt.click();
    },3000)

    //节流阀
//    1、不让图片切换太快，当上一张图片动画加载完，后用动画函数的回调函数处理
  
</script>
</body>

</html>

真棒子晓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-10

京东轮播图切换案例分析一、功能分析**（运用到动画函数，改变ul的left的值）**1、鼠标移动到小圆圈时切换图片为下一张，并且当前小圆圈的背景色为白色，其余全部为红色**（onmouseover,排他思想技术）**查看ul是否有left定位，没有需要添加。给2、鼠标点击左右则按钮时实现无缝滚动，切换图片为下一张**（onclick事件）**//左侧按钮切换（无缝滚动）var lt=document.querySelector(’.tab-lt’);var num=0//设置个参数控制ul
复制链接

扫一扫