JavaScript
文章平均质量分 73
JavaScript
ProgramNotes
这个作者很懒,什么都没留下…
展开
-
JavaScript实战015:带点选的滑动轮播图
前面我们制作了一个简单的走马灯轮播图效果,只能通过切换按钮来上下切换图片,但是通常我们看到轮播图都是带点选的,当我选择 哪张图片的时候我们就切换到哪张图,底下图标跟着图片的轮播自动切换,下面是效果图。 前面我们已经实现了在设置好的时间间隔内对图片进行自动轮播,然后点击左右箭头进行图像的切换,当鼠标移入/移出控制轮播图的停止/继续,现在我们新增一个页码(有时候只是个按钮)。...原创 2019-02-19 23:08:11 · 341 阅读 · 0 评论 -
JavaScript实战016:选项卡切换图片
有了前面制作滑动轮播图的经验,再来做个选项卡切换的非常容易了,跟我们在轮播图下面新增点选功能基本是一样的,当我把鼠标放到那个选项上就切换到哪张图,同时选项卡的背景色跟随鼠标移动而变化,下面是效果图。 同样的我们第一步先写出HTML基本代码,这里我们有四个选项和四张图,鼠标放到哪个选项上下面就显示对应的图出来,默认给第一个选项选中效果和第一张图显示效果,所以...原创 2019-02-20 08:46:36 · 1398 阅读 · 1 评论 -
JavaScript实战017:简单的图片弹功能
搞定了轮播,接着再做个图片弹窗的效果,最后再把图片弹窗和轮播结合起来,当我点击轮播中图片时能将图片弹出,达到放大的效果,为了不那么复杂,所以先分开来完成,今天先实现一张图片的弹窗效果,当鼠标点击图片的时候就将图片的原图弹出来,下面是效果图动画。第一步:,还是先写出HTML基本代码,这里只用到了一张图片,弹出的图片还是原来的哪一张,这里我分别定义了两个div,small指缩小...原创 2019-02-20 08:46:44 · 2181 阅读 · 0 评论 -
JavaScript实战018:滑动轮播图+图片弹窗
前面分别实现了滑动轮播图和图片弹窗功能,接着我将这两个功能合并到一块,实现我前面说的功能,当我点击轮播中图片时能将图片弹出,达到放大的效果,下面是结合之后的效果图动画。 有了前面的基础,这个功能实现并不难,首先弹出是相对于浏览器进行设定的,所以这一部分的代码完全可以移植过来使用,从新规划下结构即可,现在的HTML结构就是这样的。<body> ...原创 2019-02-20 08:46:51 · 1019 阅读 · 0 评论 -
JavaScript实战019:在滑动轮播图弹窗中增加图片切换功能
前面把滑动轮播和图片弹窗完美的结合在了一起,效果还是很不错的,但是还是感觉缺了点,弹出之后图片是全屏显示的,如果想换一张的话需要先关闭当前窗口然后在选择其他图片,这种操作还不够人性化,所以我想在弹窗中也添加两个左右键按钮,然后通过点击弹窗中的左右按钮实现图片的切换,如下图的样子。 说干咱就开始撸代码,首先我们要把样式给写出来,我在magnify中添加连个a标签,表示放大...原创 2019-02-20 08:47:17 · 510 阅读 · 0 评论 -
JavaScript实战014:简单的滑动轮播图
今天要做的是轮播图的功能,本来想用vue来实现的,后来想想还是用JavaScript先做个用下,为了简单一开始我们只实现最简单的基本功能,后面在添加更多的功能,这样容易理解和学习,下面的今天实现的功能,效果图如下。在设置好的时间间隔内对图片进行自动轮播;点击左右箭头进行图像的切换;鼠标移入/移出控制轮播图的停止/继续;第一步: 先写出HTML基本代码,这...原创 2019-02-19 16:02:16 · 6485 阅读 · 13 评论