零基础学做网站培训介绍

当前位置:

JS+HTML纯代码制作网站切换图

可以说任意一个网站都少不了换灯片,在之前的课程里学做网站论坛也列举了很多网站幻灯片代码,通过这些方法,我们可以制作作某一个规定尺寸的换灯片,但很难去自定义尺寸,来满足不同网站的宽度的需要。

下面学做网站论坛介绍一种通过JS/IFRAME+HTML的方式制作的换灯片的效果,通过这种方式可以制作出任一尺寸的换灯片。效果如下图:【推荐另一种制作网站轮播图的方法:https://www.xuewangzhan.net/wenti/10799.html】
网站换灯片制作方法

网站换灯片制作方法与步骤:

  1. 下载网站换灯片代码入样式的图片,下载地址:https://pan.baidu.com/s/1qWt2mok
  2. 将下载下来的压缩包解压,得到换灯片的文件夹;
  3. 用DW打开文件夹中的hd.html,修改换灯片的尺寸:(WIDTH: 1408px; HEIGHT: 400px; 就是定义换灯片的宽和高。)
    #rotator {
    WIDTH: 1408px; HEIGHT: 400px; TEXT-ALIGN: center
    }
  4. 修改好换灯片尺寸之后,就是修改换灯片的轮换的图片了。在hd.html中有以下的代码:
    {src: 'https://www.xuewangzhan.net/wp-content/themes/app/images/remoed/1.jpg', href: 'https://www.xuewangzhan.net/'},
    {src: 'https://www.xuewangzhan.net/wp-content/themes/app/images/remoed/2.jpg', href: 'https://www.xuewangzhan.net/'},
    {src: 'https://www.xuewangzhan.net/wp-content/themes/app/images/remoed/3.jpg', href: 'https://www.xuewangzhan.net/'},
    {src: 'https://www.xuewangzhan.net/wp-content/themes/app/images/remoed/4.jpg', href: 'https://www.xuewangzhan.net/'},
    {src: 'https://www.xuewangzhan.net/wp-content/themes/app/images/remoed/5.jpg', href: 'https://www.xuewangzhan.net/'},

    网站换灯片制作方法2
    这是换灯片的图片地址及图片数量(5个),可以将图片地址换成自己的图片地址,数量可以根据自己需要去添加。

  5. 修改好之后,保存。然后将整个换灯片文件夹上传到网站空间的根目录(web)下;
  6. 在网站需要显示换灯片的地方,用以下代码去调用:( height="400"可以更改成自己网站需要的高度。)
    <iframe src="网站域名/hdp/hd.html" height="400" width="100%" scrolling="no" frameborder="0"></iframe>
  7. 通过以上的代码调用就可以在自己的网站上显示自己做网站需要的换灯片了。
  8. 些网站换灯片制作方法,适用于任意网站程序。

相关阅读:

网站好用的js框架有哪些,优缺点是什么

怎么将网站JS合并成一个文件

JS封装HTML网页的方法

3条回应:“JS+HTML纯代码制作网站切换图”

  1. 学习建网站学员 yudiang说道:

    按你的方法,网站的幻灯片显示不出来呀

  2. 学做网站论坛讲师 学做网站讲师说道:

    幻灯片显示不出来,是由于你的图片路径有问题,我代码中的图片路径只是一个举例说明,自己制作时,一定换成自己的图片路径,不然不显示。

  3. 学习建网站学员 温州朱鹏说道:

    路径也改了,但是无法实现功能

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 学习了一些HTML知识,我们就可以自己动手去写一些HTML代码了。那么用什么写了,这就要用HTML 编辑器。常用的HTML 编辑器有二种就是记事本和Dreamweave
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 请注意,这里说的文章分页,不是学做网站论坛以前说的wordpress分页插件进行网站分类目录分页,而是一篇文章如果文字过多,会造成网页篇幅过长,影响
  • 可以说任意一个网站都少不了换灯片,在之前的课程里学做网站论坛也列举了很多网站幻灯片代码,通过这些方法,我们可以制作作某一个规定尺寸的换灯片,
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自