来自慢熊工作室的珠海网站建设教大家如何安装下载的JS 幻灯片。那么我们从网上下载的幻灯片到底该怎么安装呢?我相信很多新手甚至老鸟都遇到这个问题,我以前是不会安装这瘠薄东西。没办法,前几天被逼急了硬是给他安装好了。
其实加个幻灯片是非常简单的一个步骤,本文是因为写的比较的详细,所以看起来比较长。
下面我们来一步一步的操作安装幻灯片代码吧!
一、下载一个你喜欢的幻灯片
JS 幻灯片

二、然后看下载下来的文件有哪些内容
我上面下载的这个我刚才看了,没有图片,比较简单没有说服力,我再找一个麻烦一点的。
看这个:
 幻灯片文件
通过文件列表,我们可以发现有四样文件:
第一是HTML文件,这个文件是要把代码放到你想要放到你网站的地方的。
第二是CSS样式表,这个文件的CSS 是单独列出来的,我们为了CSS的调用精简,可以把CSS样式给复制下来,放到我们的主CSS样式表里面去。
第三是images,图片文件夹
第四是JS代码。

三、我们现在开始安装
        1.通过FTP将文件夹里面的images里面的焦点图片放到你的图片文件夹里面去
上传焦点图片
上传图片之后,要记得你的图片路径,因为我们再修改HTML代码的时候要用到的。
       2.将CSS样式表,复制到你的网站主CSS样式表里面去,复制好之后如下图所示的样子,就可以了。
复制CSS样式表
这样一来,你就不要再额外写调用CSS文件的代码了,方便简单。
      3.上传JS 代码,将JS 代码上传到你网站原有的JS 文件夹里面去,或者一般与CSS样式表放在一个大文件夹里面。
上传JS 代码
       如图所示,上传好之后,和图片一样,记住JS代码的路径。这个时候,不要更改JS 代码的文件名字,防止搞错。

4.最关键的一步来了,就是复制HTML代码到你想放幻灯片的页面,一般是index主页。但是是需要修改很多地方才可以的,如下图所示,我们一步一步的来解释:
a.先调用好JS,一定要注意JS 的路径是与你上传到文件夹的JS 路径是一致的:
调用JS
针对JS 代码,我多说几句,对那些不会直接影响网站上面部分的JS,可以把他们放到网站下面去,这样就不会影响网站上面的加载。但是这个幻灯片就是在网站是上方,所以我们还是放在上面吧!
b.下面开始复制HTML代码:
复制HTML代码
复制好HTML代码之后,一定要注意更改一下。注意Alt要写属性。

完成之后,我们的幻灯片代码就算是安装完成了。这时候我们生成一下首页来看看效果吧!
已经搞定啦!
安装成功
安装成功。

最后一步我们要检查一下,我这个珠海网站建设的首页的幻灯片有点问题,图片大小与左侧文章宽度不符,这时候我们改一下CSS样式表里面的DIV宽度和图片大小就可以啦。

以上就是本期图文讲解下载的JS幻灯片特效代码安装教程啦!


2017年9月20日更新,我刚才去改我的幻灯片的大小的时候,发现有些幻灯片的样式是通过JS来决定的,JS 改起来就稍微麻烦一点,所以还是建议大家选择尺寸和自己网站差不多的幻灯片吧。