jQuery实现轮播图

最新推荐文章于 2024-08-30 10:14:48 发布

vernin

最新推荐文章于 2024-08-30 10:14:48 发布

阅读量128

点赞数 1

文章标签： javascript jquery css

本文链接：https://blog.csdn.net/weixin_48165407/article/details/115336061

版权

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

最终效果

好吧，先看看效果，没有效果，都没有兴趣看枯燥代码了
在这里插入图片描述
实现原理写在代码的注释里面了，会用到一些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>
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css.css">
    <!-- 引入jQuery文件 -->
    <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，还是要加强学习才得。加油，学习人！
在这里插入图片描述

vernin

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现轮播图

我之前用css3实现轮播图过，不过那是一个简单的轮播图，只能来回切换图片。因为那时候我还没有学过javascript，没学过javascript的同学也可以去我主页看看。当然，我的是自学的js。本来我是想用原生js来做轮播图的，不过出了许多问题，一直写不出，也看了一些别人的文章，还是看不懂，最终以失败告终。不过以后我还会继续用原生js写的，直到写出来为止。学完javascript基础的我，就学了jQuery。在用原生js写这个轮播图的时候，我发现遇到的问题都是可以用jQuery解决，因为jQuery可以
复制链接

扫一扫