header_v1.7.40

web前端经典教程之精彩遍历

65天前发布

原创文章 / 多领域 / 教程
鬼谷魂 原创,如需商业用途或转载请与鬼谷魂联系,谢谢配合。

精彩的图片遍历切换技术……!

      在网页中,我们经常可以看到一些按顺序自动切换的图片。有的是同一区域的内容切换,有的是并列区域的顺序切换。然后鼠标划上去,切换停止,鼠标离开后又继续执行切换。很是抢眼,这种效果多半是通过遍历图片数量和使用定时器实现的。其中有很多细节不一样,下面我给大家汇总了几个实例。


《原地切换篇》

1. 可以看到同一位置的图片可以自动切换,然后在网页中我们想细致观察时,鼠标停放到图片上,图片切换停止。当然下图是模拟的gif动画,是没有这个功能的。


undefined


2. 图片素材如下, 有12张可供变换的图片,对应下方javascript代码里的(num == 12 );



3. 所用javasript代码如下,具体意思请看对应的注释。



《定时器为准篇》

1. 效果如下所示, 跟上面不同的是,鼠标滑过划到其中的任何一张时,自动切换会停止,但是效果依然起作用,此时以用户鼠标滑过为主,一旦鼠标离开后,自动切换会以原先自动切换时运行到的图片为准,并向后传递。



2. 素材图片如下所示。

3. css样式如下所示,可以看到一个hover动画。



《用户为准篇》

1. 除了排列方式上跟上一效果有区别之外,最本质的差别则是经过用户滑过后到底以谁为准,本案例以用户鼠标最后离开的那个按钮为准,并向后传递。



2. 素材图片如下所示。



3. html结构如下所示。



另外,再给大家补充两个设计灵感吧!



附高清实操视频






0

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功