原生代码实现轮播图

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

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

思路：看到美女，灵感就来了，在我们发呆的那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" onclick="left()">
    <img id="mid" src="../img/first.jpg" >
    <img class="right_coin" src="../img/right.jpg" onclick="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去

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

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

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

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

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

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

用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的），在上传图片的程序中该一下，拿到图片的名称，把图片的路径保存到数据库中就可以了。

原生代码实现轮播图

猜你喜欢