灵感编程,原生JS实现的轮播图功能详解【永利集团304com】

v.qq.com/x/page/p0558qxk9h6.html

本文实例讲述了原生JS实现的轮播图功能。分享给大家供大家参考,具体如下:

灵感编程-中灵感:js轮播图 面向对象实现:第1集_腾讯视频

一、效果预览:

不知道为什么连接没有用,这个是连接地址

永利集团304com 1

视频点击出现“视频不存在”现象就点上面那个链接就可以了

由于只能上传2M以下的图片,这里只截取了自动切换的效果:

自定义轮播图,采用js的面向对象封装。改进面向过程的弊端,增强可移植性。具有自适应的特点,同时一个页面可以做多个轮播图相互独立。极大的扩展移植性和应用面。

二、编写语言

同时封装css和js,使得应用起来变得很简单。

HTML、CSS、原生JS

三、编写思路

(一)HTML部分

1、.slide意为滑槽,里面存放所有图片;

2、.prev存放向左的箭头,.next存放向右的箭头;

3、pointer意为指示器,存放下方的五个切换按钮,每个切换按钮用span来表示;

4、.m-view,意为视窗,即每次看到图片的窗口,它存放以上所有的部件;

(二)CSS部分

1、.m-view设为相对定位,他的后代元素可以以它作为绝对定位的参照;

2、.slide.prev.nextpointer永利集团304com,全都用绝对定位放到合适位置;

3、.slide的所有图片水平排列,且视窗.m-view的宽度设为只有一张图片那么宽,这样默认情况.slide还是会全部显示;当给.m-view设置overflow:hidden后子元素超出它的部分就会隐藏,就实现了只显示一张图片的效果;

(三)JS部分

1、切换功能:

设置一个切换函数toggle实现左切或者右切一张图,toggle有两个子函数leftToggle和rightToggle分别实现向左、向右切换一张图,将他们分别绑定到.prev.next按钮的clik事件;

2、切换功能的淡入动画效果

只有1的话切换是立即产生的,没有过渡效果;这里利用定时器和步长将切换功能细化到更小的滑动操作leftStep和rightStep,leftToggle和rightToggle通过多次调用滑动操作来实现一次切换,这样就会产生动画效果;

发表评论

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