如何使用html+css+js完成轮播图的效果?

操作方法

  • 01

    搜狗搜索“swiper”,进入它的中文官网。

  • 02

    调用swiper的方法有很多种,比如用npm安装之类的,这里我们就用下载css和js库文件来实现吧。

  • 03

    解压后,里面有很多文件,找哪个呢?就是这两个,一个是css,一个是js。

  • 04

    我们创建一个空白test.html文件来添加swiper

  • 05

    开始做html部分。

  • 06

    接下来放入轮播的模块了。

  • 07

    大家知道html只是一个外表,js才是内核,于是我们加入js部分。

  • 08

    轮播是可以用了,但是真的很很不成看,只有一个很小的范围可以轮播。

  • 09

    我们试着改一下轮播图的大小,并加个颜色。

  • 10

    我们用谷歌浏览器F12进入控制台,模拟手机界面看一下效果。

  • 11

    果然是满宽高只有一半,可怎么划动,只能划到第三块,怎么样才能让三回到一,循环划动呢,加个loop:true就可以了。

  • 12

    然后我们再改改样式,让里面的字变大居中,变白色,再把body的边距去掉。

  • 13

    再加个功能,让它自动播,我不动手,让它每秒跑到下一下张图。

  • 14

    我们再加个分页器,分页器是什么东西,就是轮播下方的一个个小圆点,一点就是一页,这里我们应该有三个点。

  • 15

    小圆点是有了,也会随图滚动了,可是它不能点击啊,那好,我们加入这个就可以了点了。

  • 16

    人家的轮播图有左右按钮可以控制图片上一张下一张,我们也可以加。

  • 17

    在js里声明相应的对象

  • 18

    即然只是入门,那么到这里就可以了,更多的使用方法,大家可以去官网查一下,最后,我把图片放进去,做出真正的轮播图吧。

  • 19

    我搞了三张图,三张图宽高大小不一,直接放进去了,多少会让某些图片少一截或是只看见一部分,这个问题大家自己修改图片或添加样式来处理了,我就不再说了。

(0)

相关推荐

  • JS制作轮播图

    轮播图是每个网站中必不可少的元素,那么如何用JS制作轮播图呢?下面小编就给大家分享一下. 操作方法 01 首先需要在Sublime中创建HTML文档,然后在文档的body区域中加入如下图所示的轮播图内 ...

  • html css实现轮播图怎么做屏幕大小的自适应处理

    当屏幕宽度大于等于768px时,图片使用大图,轮播图里的div高度固定,宽度为窗口的宽度(随窗口宽度的变化而变化) 当屏幕宽度小于768px(手机)时,将图片换为小图,并在div里生成img标签,im ...

  • bootstrap怎样制作轮播图呢

    bootstrap制作轮播图非常方便,今天咪咪我就来给大家讲解一下bootstrap怎样制作轮播图. 操作方法 01 打开Hbuilder,新建一个轮播图的项目,如图,轮播图用到有图片,哈哈,这里我就 ...

  • 怎样制作轮播图

    轮播图在网页中经常见到,视觉效果也是很不错的,今天咪咪我就来分享怎样使用jq插件来制作轮播图,一起来看看吧! 操作方法 01 首先,安装打开好hbuilder,然后新建一个web项目,新建项目操作如图 ...

  • Axure RP Pro 7.0怎么制作图片轮播按钮控制效果?

    当下几乎所有大小网站都有轮播图展示功能,你还可以用鼠标点击轮播图上的按钮来切换图片:当你需要制作带按钮控制的轮播图效果时,往往会上网搜索制作方法,但很难找到详细步骤说明和演示,本人也经历过欲找教程但屡 ...

  • Axure RP Pro 7.0轮播图按钮控制效果手把手教程

    当下几乎所有大小网站都有轮播图展示功能,你还可以用鼠标点击轮播图上的按钮来切换图片: 当你需要制作带按钮控制的轮播图效果时,往往会上网搜索制作方法,但很难找到详细步骤说明和演示,本人也经历过欲找教程但 ...

  • ppt怎么制作图片轮播的动画效果?

    ppt文件想要做多图轮番播放的效果,该怎么制作这个动画效果,下面我们就来看看详细的教程. 1.首先启动ppt2010,执行插入命令,插入事先准备好的六张图片. 2.执行ctrl+a全选,执行oneke ...

  • js如何制作图片轮播

    轮播图是一个页面中必不可少的元素,那么怎么运用JS制作轮播图呢?下面小编通过实例给大家分享一下. 操作方法 01 首先在Sublime Text下面准备一个html和5张图片,图片宽高为600px和4 ...

  • Axure RP Pro 7.0怎么制作图片轮播按钮效果?

    当下几乎所有大小网站都有轮播图展示功能,你还可以用鼠标点击轮播图上的按钮来切换图片:当你需要制作带按钮控制的轮播图效果时,往往会上网搜索制作方法,但很难找到详细步骤说明和演示,本人也经历过欲找教程但屡 ...