我们经常在浏览网页的时候看到轮播图(比如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的),在上传图片的程序中该一下,拿到图片的名称,把图片的路径保存到数据库中就可以了。