轮播图制作

最新推荐文章于 2021-07-20 03:46:27 发布

花开半夏96

最新推荐文章于 2021-07-20 03:46:27 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/weixin_42067565/article/details/112299163

版权

本文介绍了两种网页轮播图的实现方式：跑马灯轮播和呼吸轮播。跑马灯通过平移图片实现无缝切换，而呼吸轮播则采用淡入淡出效果呈现图片切换。代码中使用了JavaScript进行控制，并通过CSS实现过渡动画，为用户提供流畅的视觉体验。

摘要由CSDN通过智能技术生成

1.跑马灯轮播图

 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
       .carousel{
           
           position:relative;
           width: 650px;
           height: 360px;
           border:1px solid #000;
           margin:100px auto;
       }
       .carousel ul {
           position:relative;
           width: 6000px;
           list-style:none;
           left:0px;
           transition:left 0.5s linear 0s;
       }
       .carousel ul li{
           float:left;
       }
       .carousel .leftbtn{
           position:absolute;
           top:50%;
           margin-top:-25px;
           left:20px;
           width: 50px;
           height: 50px;
           background-color: orange;
           border-radius:50%;
       }
       .carousel .rightbtn{
           position:absolute;
           top:50%;
           margin-top:-25px;
           right:20px;
           width: 50px;
           height: 50px;
           background-color: rgb(61, 64, 196);
           border-radius:50%;
       }

    </style>
</head>
<body>
    <div class="carousel">
       <ul id='list'>
           <li><img src="images/beijing/0.jpg" alt=""></li>
           <li><img src="images/beijing/1.jpg" alt=""></li>
           <li><img src="images/beijing/2.jpg" alt=""></li>
           <li><img src="images/beijing/3.jpg" alt=""></li>
           <li><img src="images/beijing/4.jpg" alt=""></li>
       </ul>
       <a href="javascript:;" class='leftbtn' id='leftbtn'></a>
       <a href="javascript:;" class='rightbtn' id='rightbtn' ></a>
    </div>
    <script>
        var leftbtn=document.getElementById('leftbtn');
        var rightbtn=document.getElementById('rightbtn');
        var list=document.getElementById('list');
        //克隆第一张图片
        var cloneli=list.firstElementChild.cloneNode(true);
        list.appendChild(cloneli);
        //idx是第几张
        var idx=0;
        //节流锁
        var lock=true;
        rightbtn.onclick=function(){
            if(!lock) return;
            lock=false;
            //给list加过渡
            list.style.transition='left 0.5s linear 0s';
            idx++;
            if(idx>4){
                //设置一个延时器，延时器的功能是瞬间将ul拉回0的位置
                setTimeout(function(){
                     //取消过渡，因为瞬间移动
                     list.style.transition='none';
                    list.style.left=0;
                    idx=0;
                },500);
            }
            list.style.left=-idx*650+'px';
            setTimeout(function(){
                    lock=true;
            },500);
        }
        leftbtn.onclick=function(){
            if(!lock) return;
            //判断是不是第0张
            if(idx==0){
                //取消掉过渡，因为要的是瞬间移动，不是咕噜过去
                list.style.transition='none';
                //瞬间移动到最后的假图片上
                list.style.left=-5*650+'px';
                
                //设置一个延时器，这个延时器的时间可以是0毫秒，虽然是0，但是可以保证我们的过渡瞬间结束，然后再加上过渡
                setTimeout(function(){
                    //加过渡
                    list.style.transition='left 0.5s linear 0s';
                    //idx改为真正的最后一张图片的编号
                    idx=4;
                    list.style.left=-idx*650+'px';
                },0);
            }
            else{
                idx--;
            list.style.left=-idx*650+'px';
            }
            //函数节流
            setTimeout(function(){
                    lock=true;
            },500);
            
           

            
        }
    </script>
</body>
</html>

2.节流
节流：当你不断触发某一事件时，每隔一个固定时间，执行一次你想要执行的代码。（为防止频繁触发事件而执行n多次的代码）

 var flag = true   //节流阀默认为true

   window.onscroll = function () {     //触发事件后代码执行第一次
     if (flag === false) return     // 节流阀闭合则不执行

     flag = false // 来到这里即开关打开状态，现在关掉开关以免重复执行

     console.log('执行一次')
     setTimeout(() => {  //为防止频繁触发，用延迟器来设置时间间隔
       flag = true     //0.5秒后打开开关
     }, 500)  //若事件被极频繁触发，也能保证至少等待0.5秒再执行下一次
										         //的事件处理函数
   }

3.呼吸轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
       .carousel{
           
           position:relative;
           width: 650px;
           height: 360px;
           border:1px solid #000;
           margin:100px auto;
       }
       .carousel ul {
          
          
           list-style:none;
          
       }
       .carousel ul li{
        position:absolute;
          top:0;
          left:0;
          opacity: 0;
          transition:opacity 1s ease 0s;
       }
       .carousel ul li:first-child{
        opacity: 1;
       }
       
       .carousel .leftbtn{
           position:absolute;
           top:50%;
           margin-top:-25px;
           left:20px;
           width: 50px;
           height: 50px;
           background-color: orange;
           border-radius:50%;
       }
       .carousel .rightbtn{
           position:absolute;
           top:50%;
           margin-top:-25px;
           right:20px;
           width: 50px;
           height: 50px;
           background-color: rgb(61, 64, 196);
           border-radius:50%;
       }

    </style>
</head>
<body>
    <div class="carousel">
       <ul id='list'>
           <li><img src="images/beijing/0.jpg" alt=""></li>
           <li><img src="images/beijing/1.jpg" alt=""></li>
           <li><img src="images/beijing/2.jpg" alt=""></li>
           <li><img src="images/beijing/3.jpg" alt=""></li>
           <li><img src="images/beijing/4.jpg" alt=""></li>
       </ul>
       <a href="javascript:;" class='leftbtn' id='leftbtn'></a>
       <a href="javascript:;" class='rightbtn' id='rightbtn' ></a>
    </div>
    <script>
        var leftbtn=document.getElementById('leftbtn');
        var rightbtn=document.getElementById('rightbtn');
        var list=document.getElementById('list');
        var lis=list.getElementsByTagName('li');
        //当前是第几张图显示
        var idx=0;
        //节流
        var lock=true;
        rightbtn.onclick=function(){
            if(!lock)  return;
            lock=false;
            //老图淡出
          lis[idx].style.opacity=0;
          idx++;
          if(idx>4){
              idx=0;
          }
          //新图淡入
          lis[idx].style.opacity=1;
          //动画结束之后开锁
          setTimeout(function(){
              lock=true;
          },1000);
        }
        leftbtn.onclick=function(){
            if(!lock)  return;
            lock=false;
            //老图淡出
          lis[idx].style.opacity=0;
          idx--;
          if(idx<0){
              idx=4;
          }
          //新图淡入
          lis[idx].style.opacity=1;
          //动画结束之后开锁
          setTimeout(function(){
              lock=true;
          },1000);
        }