jQuery实现轮播图

梦里梦外; 2022-11-15 03:46 267阅读 0赞

我之前用css3实现轮播图过，不过那是一个简单的轮播图，只能来回切换图片。因为那时候我还没有学过javascript，没学过javascript的同学也可以去我主页看看。当然，我的是自学的js。本来我是想用原生js来做轮播图的，不过出了许多问题，一直写不出，也看了一些别人的文章，还是看不懂，最终以失败告终。不过以后我还会继续用原生js写的，直到写出来为止。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]  
学完javascript基础的我，就学了jQuery。在用原生js写这个轮播图的时候，我发现遇到的问题都是可以用jQuery解决，因为jQuery可以更多更简单的方法的操作css。其实用jQuery写也遇到一些问题，不过仔细分析之后还是解决了。做完这个我就发现，实现一些功能，不仅仅要技术好还要有思想（解决问题的思想）。（当然，这并不是说我的技术好，我只是会一些基础的而已）

### 最终效果 ###

好吧，先看看效果，没有效果，都没有兴趣看枯燥代码了  
![在这里插入图片描述][20210330222710476.gif_pic_center]  
实现原理写在代码的注释里面了，会用到一些css3知识，不过写得不怎么全面，但是还是可以理解的。要是知道css3的就更容易理解啦！

### css部分 ###

*{ 
        padding: 0;
        margin: 0;
    }
    .outer{ 
        text-align: center;
        position: relative;
        width: 300px;
        height: 200px;
        margin: 200px auto;
        overflow: hidden;
    }
    .ul{ 
        width: 1200px;
        height: 200px;
        list-style-type: none;
        
    }
    li{ 
        float: left;
    }
    /* 过渡效果 */
    .tran{ 
        transition: 1s
    }
    img{ 
        width: 300px;
        height: 200px;
    }
    button{ 
        border: 2px solid black;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        position: relative;
        bottom: 30px;
    }
    .bgc{ 
        background-color: red;
    }
    span{ 
        width: 25px;
        height: 20px;
        background-color: rgba(0,0,0,.3);
        color: #fff;
        position: absolute;
        top: 50%;
        display: none; /*隐藏*/
    }
    /* 鼠标经过.outer元素 span元素显示 */
    .outer:hover span{ 
        display: block;
    }
    .firsp{ 
        left: 0px;
        border-radius: 0px 5px 5px 0px;
    }
    .lasp{ 
        right: 0px;
        border-radius: 5px 0px 0px 5px;
    }

### HTML和js部分 ###

<!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>js轮播图</title>
        
        <link rel="stylesheet" href="./css.css">
        
        <script src="../jQuery.js"></script>
    </head>
    <body>
        <div class="outer">
            <ul class="ul">
                
                
                
                <li><img src="./gtr.jpg"></li>
                <li><img src="./evo.jpg"></li>
                <li><img src="./sti.jpg"></li>
                <li><img src="./gtr.jpg"></li>
            </ul>
            <button></button>
            <button></button>
            <button></button>
            <span class="firsp"><</span>
            <span class="lasp">></span>
        </div>
        <script>
            var index = 0;//定义索引 默认值0
            var timer;
            $("button").eq(0).addClass("bgc");//刚开始时设置第一个小圆点的 bgc 类
        
            //图片切换方法，根据索引的变化而移动长度不同
            function ch(){ 
                $(".ul").css({ 
                    "margin-left": index*(-300) +"px"
                });
            }
            // 小圆点变化方法
            function ra(){ 
                if(index == 3){ 
                    $("button").eq(0).addClass("bgc");
                    $("button").eq(2).removeClass("bgc");
                }
                var rrr = $("button").eq(index).addClass("bgc");  
                rrr.siblings().removeClass("bgc");
            }
            //最重要的方法，里面有个定时器 定时器里每两秒 index + 1，
            //切换图片方法执行一次、小圆点变化方法执行一次
            //定时器没两秒钟：1.index++ 【当加到到4，超过lis索引（图片数量）的时候index= 0】，
            // 2.给 ul添加tran类(tran是在css里面定义的，作用：给图片切换的过程一个过渡)
            // 3.ch() 执行一次
            // 4.ra() 执行一次 
            function auto(){ 
                timer = setInterval(function(){ 
                    index++;
                    $(".ul").addClass("tran");//添加tran类 切换有过渡效果 .tran设置在css里
                    if(index == 4){ 
                        index = 0;
                        //删除tran类，作用：切换回第一张图片的时候没有过渡
                        $(".ul").removeClass("tran");//没有 tran类，就会快速切换
                    }
                    ch();
                    ra();         
                },2000)
            }
            auto();
            //鼠标经过outer清除定时器
            $(".outer").mouseenter(function(){ 
                clearInterval(timer);
            })
            //鼠标离开outer执行aa()方法
            $(".outer").mouseleave(function(){ 
                auto();
            })
            //鼠标点击小圆点，执行下面代码
            $("button").click(function(){ 
                clearInterval(timer); 
                index = $(this).index() - 1;
                ch();
                $(this).addClass("bgc").siblings().removeClass("bgc");
            })
            //左边小按钮点击事件
            $(".firsp").click(function(){ 
                index = index - 1; //index - 1 等于 margin-left + 300px(倒退300像素) 
                //减到-1的时候，让它等于0，减得越多，(倒退到第一张图片就不能再倒退了)
                if(index == -1){ 
                    index = 0;
                }
                ch();
                ra();
            })
            //右边小按钮点击事件
            $(".lasp").click(function(){ 
                index = index + 1;//index + 1 等于 margin-left - 300px(往前300像素)
                $(".ul").addClass("tran");
                if(index == 4){ 
                    index = 0;
                    $(".ul").removeClass("tran");
                }  
                ch();
                ra();
            })   
        </script>
    </body>
    </html>

其实这个代码也不怎么样，有部分代码冗余，也修改了一些，这是最好的一次了，再改就不能实现这里效果了，不过这个轮播图也有一些bug，还是要加强学习才得。加油，学习人！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/749bc32c6fd04571a5c20f31e0b5bcf7.png
[20210330222710476.gif_pic_center]: /images/20221022/ca3fe3e548b447839fac710f767ee070.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/2c0fa7e7026a4d90a87c31f97da2b6db.png