• 无限轮播图的制作


    (如果打开过慢,或者打不开,原因你懂得。)
    一、思路
    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,基本想法就是这样,待我填坑。




  • 相关阅读:
    C语言和go语言之间的交互
    Elasticsearch笔记九之优化
    Elasticsearch笔记八之脑裂
    Elasticsearch笔记七之setting,mapping,分片查询方式
    Elasticsearch笔记六之中文分词器及自定义分词器
    Elasticsearch笔记四之配置参数与核心概念
    Elasticsearch笔记三之版本控制和插件
    Elasticsearch笔记二之Curl工具基本操作
    Elasticsearch笔记五之java操作es
    Python处理Excel表格
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4526566.html
Copyright © 2020-2023  润新知