jQuery制作网页动态轮播图

朴灿烈づ我的快乐病毒、 2023-10-08 12:50 44阅读 0赞

注：  
本文将轮播图的制作划分为六步，对此依次编写：  
功能说明:

1.  点击向右(左)的图标, 平滑切换到下(上)一页
2.  无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
3.  每隔3s自动滑动到下一页
4.  当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
5.  切换页面时, 下面的圆点也同步更新
6.  点击圆点图标切换到对应的页

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70]  
源码及解析：  
html：

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>焦点轮播图</title>
      <style type="text/css">
        /*去除内边距,没有链接下划线*/
        * {
          
          margin: 0;
          padding: 0;
          text-decoration: none;
        }
    
        /*让<body有20px的内边距*/
        body {
          
          padding: 20px;
        }
    
        /*最外围的div*/
        #container {
          
          width: 600px;
          height: 400px;
          overflow: hidden;
          position: relative; /*相对定位*/
          margin: 0 auto;
        }
    
        /*包含所有图片的<div>*/
    
        #list {
          
          width: 4200px; /*7张图片的宽: 7*600 */
          height: 400px;
          position: absolute; /*绝对定位*/
          z-index: 1;
    
        }
    
        /*所有的图片<img>*/
        #list img {
          
          float: left; /*浮在左侧*/
        }
    
        /*包含所有圆点按钮的<div>*/
        #pointsDiv {
          
          position: absolute;
          height: 10px;
          width: 100px;
          z-index: 2;
          bottom: 20px;
          left: 250px;
        }
    
        /*所有的圆点<span>*/
    
        #pointsDiv span {
          
          cursor: pointer;
          float: left;
          border: 1px solid #fff;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #333;
          margin-right: 5px;
        }
    
        /*第一个<span>*/
    
        #pointsDiv .on {
          
          background: orangered;
        }
    
        /*切换图标<a>*/
    
        .arrow {
          
          cursor: pointer;
          display: none;
          line-height: 39px;
          text-align: center;
          font-size: 36px;
          font-weight: bold;
          width: 40px;
          height: 40px;
          position: absolute;
          z-index: 2;
          top: 180px;
          background-color: RGBA(0, 0, 0, 0.3);
          color: #fff;
        }
    
        /*鼠标移到切换图标上时*/
        .arrow:hover {
          
          background-color: RGBA(0, 0, 0, 0.7);
        }
    
        /*鼠标移到整个div区域时*/
        #container:hover .arrow {
          
          display: block; /*显示*/
        }
    
        /*上一个切换图标的左外边距*/
        #prev {
          
          left: 20px;
        }
    
        /*下一个切换图标的右外边距*/
        #next {
          
          right: 20px;
        }
      </style>
    </head>
    
    <body>
    
    <div id="container">
      <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
      </div>
      <div id="pointsDiv">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
      </div>
      <a href="javascript:;" id="prev" class="arrow"><</a>
      <a href="javascript:;" id="next" class="arrow">></a>
    </div>
    <script src="../常见效果/jquery-1.10.1.js"></script>
    <script src="app.js"></script>
    </body>
    
    </html>

app.js文件

/*
       功能说明:
       1. 点击向右(左)的图标, 平滑切换到下(上)一页
       2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
       3. 每隔3s自动滑动到下一页
       4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
       5. 切换页面时, 下面的圆点也同步更新
       6. 点击圆点图标切换到对应的页
       */
    $(function(){
        
        var $container = $('#container'); 
        var $list = $('#list');
        var $pointsDiv = $('#pointsDiv');
        var $points = $('#pointsDiv>span');
        var $prev = $('#prev');
        var $next = $('#next');
        var PAGE_WIDTH = 600;
        var TIME = 400;
        var ITEM_TIME = 20;
        var imgCount = $points.length;
        var index = 0;
        var moving = false;//标识是否正在翻页（默认没有）
    
        //    1. 点击向右(左)的图标, 平滑切换到下(上)一页
        $next.click(function(){
        
            nextPage(true);
            //    2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
    
        });
        $prev.click(function(){
        
            nextPage(false);
        });
        //    3. 每隔3s自动滑动到下一页
        var times = setInterval(() => {
        
            nextPage(true);
        }, 1000);
        //    4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
        $container.hover(
            function(){
        
                clearInterval(times);
            },
            function(){
        
                times = setInterval(() => {
        
                    nextPage(true);
                }, 1000);;
            }
        );
    
        //    6. 点击圆点图标切换到对应的页
        $points.click(function(){
        
            targetIndex = $(this).index();
            //只有点击的不是当前页的圆点时才翻页
            if(targetIndex != index){
        
                nextPage(targetIndex);
            }
        });
    
        /* 
            平滑翻页：next
            true:下一页
            false:上一页
            数值：指定下标ye
        */
        function nextPage(next){
        
            //总偏移量
            //总时间 TIME
            //单元移动的间隔时间：ITEM_TIME
            //单元移动的偏移量
    
            //如果正在翻页，直接结束
            if(moving){
        //已经正在翻页中
                return;
            }
            moving = true;//标识正在翻页
            var offset =0 ;
            //计算offset
            if(typeof next === 'boolean'){
        
                offset = next ? -PAGE_WIDTH:PAGE_WIDTH;
            }else{
        
                offset = -(next - index )* PAGE_WIDTH;
            }
            //计算itemOffset
            itemOffset = offset/(TIME/ITEM_TIME);
            //得到当前的left值
            currLeft = $list.position().left;
            //计算出目标left
            var targetLeft = currLeft + offset;
            //启动循环定时器不断更新$list的left，达到目标处停止定时器
            var intervalId = setInterval(() => {
        
                //计算出最新的currLeft
                currLeft += itemOffset;
                if(currLeft === targetLeft){
        
                    // $list.css('left', targetLeft);
                    clearInterval(intervalId);
                    //标识翻页停止
                    moving = false;
    
                    //如果到达了最右边的图片，跳转到最左边的第二张图片
                    if(currLeft === -(imgCount+1)*PAGE_WIDTH){
        
                        currLeft = -PAGE_WIDTH;
                    }else if(currLeft === 0){
        
                        currLeft = -imgCount*PAGE_WIDTH;
                    }
                    //如果到达了最左边的突变，跳转到最右边的第二张图片
    
                }
                $list.css('left', currLeft);
            }, ITEM_TIME);    
    
            //    5. 切换页面时, 下面的圆点也同步更新
            updatePoints(next);
        }
    
        //更新圆点的函数
        function updatePoints(next){
        
            //计算当前的index
            targetIndex = 0;
            if(typeof next === 'boolean'){
        
                if (next){
        
                    targetIndex = index +1;
                    if(targetIndex === imgCount){
        
                        targetIndex = 0;
                    }
                }else{
        
                    targetIndex = index -1;
                    if(targetIndex === -1){
        
                        targetIndex = imgCount-1;
                    }
                }
            }else{
        
                targetIndex = next;
            }
            
            //移除之前span的class
            $points[index].className = '';
            //给当前的span添加class
            $points[targetIndex].className = 'on';
            //更新index
            index = targetIndex;
        };
        
    
    });

希望本文对你有所帮助！  
如有疑惑，可参考B站尚硅谷前端jQuery教程(https://www.bilibili.com/video/BV1ts411E7ag?p=29)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210526193455519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3,size_16,color_FFFFFF,t_70