原生代码实现轮播图

悠悠 2022-05-24 05:54 302阅读 0赞

我们经常在浏览网页的时候看到轮播图（比如csdn首页就有），感觉很神奇，哇，我也要做一个！但是觉得有点难，无从下手，只能先发发呆瞎点一下左右轮播键

![70][]

步骤：胖子不是一口吃成的，把一个复杂的问题进行切割就变成一个个简单的问题

思路：看到美女，灵感就来了，在我们发呆的那10几秒钟好像发生了下面2件事：

1、我们鼠标点击了右边切换键  2、图片神奇地换成美女图

虽然笔者的js水平一般，但还是可以敏锐地发现上面其实就是点击了一下（onclick），然后图片变了，图片是怎么变的呢？一个比较low的想法是改变图片的路径src，那可以给图片加一个id,通过id获取图片对象，再改变它的src（页面用的是更高级的写法，我也不会，就不说了）

好鸡冻，赶紧写代码（版本1）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="swiper">
        <img class="left_coin" src="../img/left.jpg" οnclick="left()">
        <img id="mid" src="../img/first.jpg" >
        <img class="right_coin" src="../img/right.jpg" οnclick="right()">
    </div>
    <script>
        var img = ["../img/first.jpg","../img/second.jpg","../img/third.jpg","../img/forth.jpg"]
        var index = 0;
        var num=4;
        function left() {
            index++;
            if(index>=num){
                index = index-num
            }
            var element = document.getElementById("mid");
            element.src = img[index];
            //alert(element.src)
        }
    
        function right() {
            index--;
            if(index<0){
                index = index+num
            }
            var element = document.getElementById("mid");
            element.src = img[index];
        }
    
    </script>
    </body>
    </html>

上面的img数组要改成自己图片所放置的位置。

.swiper{
        width: 800px;
        height: 400px;
    }
    .left_coin{
        width: 30px;
        background-color: aqua;
        height: 40px;
        display: inline-block;
        float: left;
        margin-top: 180px;
    }
    #mid{
        width: 740px;
        height: 400px;
        background-color: aliceblue;
        display: inline-block;
        float: left;
    }
    .right_coin{
        width: 30px;
        height: 40px;
        margin-top: 180px;
        display: inline-block;
        background-color: cadetblue;
        float: left;
    }

随便写一点css,真的丑，别打我，自己打css去

![70 1][]

到这里的代码应该还算比较简单，哪句代码不太明白可以查一下百度谷歌

2、这时候你可能会说，轮播图好像貌似勉强可以算是完成了，但是怎么看都像是一个玩具，要怎么样才能想真实环境中从服务器中获取图片呢？整个过程是这样的：我们从数据库拿出要轮播图的图片url，用js嵌入到html代码中。

这样需要用到php, 数据库等的知识，这2个方面不太会也没什么关系，我会做一些解释。

首先我们要区分“服务器端”和“浏览器端”，简单理解“浏览器端”是你的电脑，你的浏览器；“服务器端”一般指远程服务器（也可以是本地服务器），比如各大公司的服务器。html和js都是“浏览器端”的代码（按F12，你可以看到页面的html和js），说白了只有html和css就是在自己电脑上自娱自乐。当我们不能满足这种自娱自乐，需要服务器端处理数据的时候，需要选一门语言来处理问题，有的公司选择了java,c\#,python,但用得最多的还是php----可能是因为它比前面的那些都要简单。对于php,你目前需要知道只有它很简单，不用怕它。

首先，我们先假定已经建好数据库和数据表了，

![70 2][]

现在的问题就是怎么和数据库勾搭上，拿到数据库中的数据？

用php可以作为前端和数据库之间的媒介，PHP有内置函数可以连接数据库，操作数据库。直接例子：

连接数据库:

$user= "root";//数据库的用户名
    $psw="password";//密码
    $dbh = new PDO('mysql:host=localhost;dbname=my_test',$user,$psw);//new PDO类建立一个连接，有三个参数：'数据库类型，主机，数据库名'，'账号'，'密码'

成功连接数据库相当于打电话打通了，接下来说清楚具体想干嘛了，增删还是改查。我们这里例子是从数据库中查询，拿到结果

$sql = $dbh->query("SELECT * FROM banner_url");//查询语法
    $result = $sql->fetchAll();//获取数据
    $num =count($result);//计数

//var\_dump($result) //可以看看是不是我们有没有拿到我们想要的数据//echo $num;

将拿到$result 改变一下格式，赋值给刚刚的img，就大功告成了。这里需要说一下的是，js获取后台php的方法很多，这里先不涉及。

后面，你还可以写一个上传图片程序。上传图片可以在网上找到相关代码，（我就是直接在菜鸟课程上面copy的），在上传图片的程序中该一下，拿到图片的名称，把图片的路径保存到数据库中就可以了。

[70]: /images/20220524/34a7ce961254499eaefd4a230130902e.png
[70 1]: /images/20220524/2481445103b649acb386f39042e09a34.png
[70 2]: /images/20220524/e71baf04ef0d4322a77d131eb9b6c5db.png