无限轮播图的制作

摘要:
6、当鼠标移入时,停止定时器,当鼠标移出的时候,启动定时器。
url:http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/huanyouji/index.html
(如果打开过慢,或者打不开,原因你懂得。)
一、思路
1、所有滑动效果的demo都是通过控制css里的left值,来控制滑动效果的。
2、需要两个块,一个div块,一个ui。div块的position是relative,ui块的position是absolute。这样ui块的left就可以根据外层的div来控制。div的overflow是hidden,因为ui里面的li的float是left的,ui的宽度必定比div宽,但是要保证只显示一张图,所以超出div的部分隐藏掉。
3、两个按钮,这两个按钮,无非就是控制UI的left值变化,以每一张图的宽度为限,进行加或减的运算。
4、所谓无限轮播,只是在不停点击按钮的时候,图片会一直向左,或者向右转动,而不是像某些轮转图,当到达零界点时,发生跳转。这个时候,我们就要复制第一张图,把第一张插入整个ui的最后,把最后一张图,复制插入整个ui的首位。当点击到我们复制的图片时,就直接定位到,最后一张图,或者第一张图。这种快速的定位,不会有任何间隙的产生。
5、自动播放,也就是当页面载入的时候,设定一个定时器,让这个定时器,调用自身。定时器的fn无法就是点击按钮,让图片自己转动起来。
6、当鼠标移入时,停止定时器,当鼠标移出的时候,启动定时器。
7、当点击按钮的时候,判断当前是否处于动画状态,处于动画状态,就移除对left的控制,不处于动画状态,就执行对left的控制,这个主要是考虑到,当用户不停地点击按钮时,图片会不停的轮转,点击了多少次,就执行多少次点击函数。这是一种不好的用户体验。
二、代码
具体效果代码。可以点击上面的url,查看推敲,我是用avalon和jquery结合做的。
三、总结
1、基本上所有的动画效果,都是通过控制css属性来实现的,不管是渐变、滑动、切换、弹出、消失、隐藏。js只是实现一个控制的功能。
2、对于组件使用的看法,js的ui组件很多,我的看法是,项目中有自信的可以自己做,没自信的就用,比较一个好的ui库是比自己写的完善很多的,项目不是让自己练手的东西。自己的小demo,可以用js原生来写,用jq来写,都随意,这是体现自己实力的东西。
<--待完善-->
突然发现一些小BUG,基本想法就是这样,待我填坑。

来自为知笔记(Wiz)

免责声明:文章转载自《无限轮播图的制作》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇vue video.js使用技巧在线浏览PDF文件的实用jquery插件推荐(转)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

如何给flash里面添加链接

解决思路:因为网页中的 Flash 是以控件形式出现的,优先级别较高,所以直接对它加链接是无效的,不过可以用按钮控件 BUTTON 来实现。 方案一: 直接在按钮上加上onClick事件打开指定页面,运行后单击按钮时,按钮中的Flash有个下沉的动作,如果要取消这个动作,可以禁止按钮的交互性,然后用标准的A标签做链接,代码如下: <a class="...

dva 路由跳转

1.从props取出并传递history 取 const { history } = this.props 用 <button onClick={ () => history.push('/') }>go back home</button> 2.withRouter, Link withRouter: import {...

二维码(android)

我们都知道一般的二微码都是以不同形式显示有的是登入,有的是网页,其实二维码只是一个字符串。到这里我们就有一个疑问那二维码是这样判断是网站或者是登入功能的呢? 其实这些判断部分,二维码生成器早就给你完成了,我们只需导入一个core-3.2.1.jar包就行。那接下来我们来做一个简单的小案例,进一步了解二维码。 一、新建项目 1、我们建一个名为"weima"的...

IDEA中阿里JAVA代码规范插件(P3C)的安装及使用

  JAVA代码规范插件(P3C)是阿里巴巴2017年10月14日在杭州云栖大会上首发的,使之前的阿里巴巴JAVA开发手册正式以插件形式公开走向业界。插件的相关信息及安装包都可以在GitHub(https://github.com/alibaba/p3c)上获取。目前插件实现了开发手册中的53条规则,只能满足较为基本的代码检测,后继应该会更加完善。MyEc...

轮播图组件

一、Flutter 轮播图组件 地址:https://pub.dev/packages/flutter_swiper import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; class SwiperPage extends St...

pyautogui自动化控制鼠标和键盘操作

pyautogui自动化控制鼠标和键盘操作 安装 pyautogui鼠标操作样例 pyautogui键盘操作样例 按键支持 提示信息 alert option password prompt 截屏 整个屏幕截图并保存 屏幕查找图片位置并获取中间点 安全设置 PyAutoGUI是一个纯Python的GUI自动化工具,其目的是可以用程序自动控...