用JavaScript 代码来做,图片切换效果!

用原生的JS写动画效果的确是个很令人纠结的事情,倒不如直接用jQuery来写,亦或找一些jQuery插件。能力达不到的时候,为了工作进度,只能采取心有不甘的手段。

如果真的获得能力的提高,我认为还是必须去学习那些优秀的程序员写的优秀的代码。图片切换并不是很难,只不过要获得一些动画效果有些费力,由于本人数学不好,加之不努力,所以做起动画来很吃力。

动画切换要结合JS和CSS达到想要的效果。图片切换一般涉及的CSS的定位,以及JS定时器的知识。定位方式一般定时变换幻灯片的left或者 top属性,实现图片移动。还有一种是设置幻灯片的父容器的scrollTop或者scrollLeft属性。这里用的是定位方式。

首先HTML结构遵循一定的规律,至于为什么,下面会提到。

1 2 3 4 5 6 7

外部包裹的div是一个容器,用来包裹图片容器和切换容器。外部的大div和图片容器宽度和高度定死,overflow属性设置为hidden,防止图片溢出容器。·

下面介绍JS代码如何实现幻灯效果。

首先创建Slider对象,在JS中函数就是对象。该对象接受两个属性,一个是外层容器的ID属性值,另一个是配置参数。

var Slider = function(elem, options) { var container = document.getElementById(elem), // HTML结构遵循规律 divs = container.getElementsByTagName('div'), // 至于为何 imgWrapper = divs[0], // 此处就是原因 sheets = imgWrapper.getElementsByTagName('img'), triggersObj = divs[1], triggers = triggersObj.getElementsByTagName('a'); var that = this; this.imgsCon = imgWrapper.getElementsByTagName('ul')[0]; this._imgs = imgWrapper.getElementsByTagName('img') // 设置默认配置参数 this.options = { auto: true, // 默认自动翻滚 index: 0, // 第一张图片开始 vertical: false, // 水平滚动 event: 'onclick' //点击切换 } // 设置参数 this.setOptions(options); this.event = this.options.event; this.currentIndex = this.options.index; // 幻灯宽和高 this.sheetWidth = this.sheetHeight = 0; this.sheetWidth = sheets[0].offsetWidth; this.sheetHeight = sheets[0].offsetHeight; // 移动方向 this.direction = !!this.options.vertical ? 'top' : 'left'; this.imgsCon.style.position = 'absolute'; // 循环滚动 if (!!this.options.auto) { this.autoStart(); } if ('top' === this.direction) { this.imgsCon.style[this.direction] = - (this.currentIndex * this.sheetHeight || 0) + 'px'; } else if ('left' === this.direction) { this.imgsCon.style.width = this.sheetWidth * sheets.length + 'px'; this.imgsCon.style[this.direction] = - (this.currentIndex * this.sheetWidth || 0) + 'px'; } var lis = this.imgsCon.getElementsByTagName('li'); for (var i = lis.length; i--;) { var li = lis[i], cssText = ''; if ('left' === this.direction) { cssText = cssText + 'float:left;'; } cssText += 'width:' + this.sheetWidth + 'px;'; cssText += 'height:' + this.sheetHeight + 'px;'; li.style.cssText = cssText; } triggers[this.currentIndex].className += ' current'; // 绑定事件 for (var i = triggers.length; i--;) { triggers[i][this.event] = function(index, that) { return function() { clearInterval(that.timer); setTimeout(function() { that.autoStart(); }, 3000); that.endPos = { left: - index * that.sheetWidth, top: - index * that.sheetHeight }; that.move(); that.currentIndex = index; that.setCurrentIndex(); return false; } }(i, this); }}

getStep方法接收两个参数,一个是目标值,另一个是当前值。例如,目标值是left=-400,当前值为0,那么在从0到-400这段运动的距离中,如果没有达到目标值,通过不断地调用getStep方法,获得不同的渐进量。

至于其他有什么忽略之处,欢迎指正。

本文来自企鹅号 - 天弘媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏10km的专栏

linux下boost编译安装全过程脚本塈bzip2编译安装全过程脚本

boost编译安装 build_boost.sh #!/bin/bash shell_folder=$(cd "$(dirname "$0")";pwd) pu...

27570
来自专栏IMWeb前端团队

bash 的 Test

原文 bash 中的 test 确实是一个让初学者迷糊的概念,但是理解了之后,发现它并没有深奥的地方。 实际场景 export NVM_DIR="/Users/...

20260
来自专栏运维前线

Windows Server上安装部署Zabbix agent(最新版)

Windows Server上安装部署Zabbix agent 下载并解压到指定目录 Zabbix下载页面:https://www.zabbix.com/do...

77760
来自专栏王小雷

sh/bash/csh/Tcsh/ksh/pdksh等shell本质区别

sh/bash/csh/Tcsh/ksh/pdksh等shell本质区别 1. Shell脚本的书写 在写Shell脚本时,往往第一行要注明用什么解释器来解释这...

31770
来自专栏企鹅号快讯

如何在 Bash 中抽取子字符串

所谓“子字符串”就是出现在其它字符串内的字符串。 比如 “3382” 就是 “this is a 3382 test” 的子字符串。 我们有多种方法可以从中把数...

20690
来自专栏IMWeb前端团队

bash 的字符串和数组

回顾下自己接触过的编程语言,字符串和数组真是基础中的基础。也因此,在接触一门新的语言的时候,非常有必要去熟悉该语言的字符串和数组。 字符串 声明和赋值 name...

23180
来自专栏10km的专栏

Ubuntu16:cmake生成Makefile编译caffe过程(OpenBLAS/CPU+GPU)塈解决nvcc warning:The 'compute_20', 'sm_20'

之前在ubuntu14下实现了Caffe编译(参见去年写的博客 《 Ubuntu14:cmake生成Makefile编译caffe过程(OpenBLAS/CPU...

77980
来自专栏10km的专栏

maven:release:prepare报错Cannot run program "bash"

今天执行mvn release:prepare做版本发布的时候报了一个莫名其妙的错误: [ERROR] Caught exception in FS.readP...

281100
来自专栏运维前线

CentOS6 脚本自动安装redis sentinel

脚本自动安装redis sentinel(在同一台服务器上) #!/usr/bin/env bash # ---------------------------...

32370
来自专栏IMWeb前端团队

bash 的变量和参数

对一个编程脚本来说,最最基础的当然是变量。 对大多数开发者来说,变量也是最不值得的大说特说的。 但 bash 里的变量有一些特别的地方值得说说,谨防跌坑。 基本...

19000

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励