专栏首页企鹅号快讯用JavaScript 代码来做,图片切换效果!

用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 条评论
登录 后参与评论

相关文章

  • 轻松学习 JavaScript(8):JavaScript 中的类

    英文: Dhananjay Kumar 译文:码农网/小峰 www.codeceo.com/article/easy-javascript-08-class...

    企鹅号小编
  • 被曝拟重新安置30%员工 IBM驳斥称“报道不准确”

    腾讯科技讯 1月12日消息,据外媒报道,英国科技网站The Register周四(11日)报道称,IBM聘请贝恩咨询公司帮助其制定战略,包括通过减少雇佣的方式重...

    企鹅号小编
  • 经常出现却又容易被忽略的Java SE面试题 必看

    在面试的过程中往往会遇到javase的题目,这个又是容易被忽略,来看一下是哪些呢? 1)运行时异常,非运行时异常。 运行时异常可进行处理,也可不进行处理。非运行...

    企鹅号小编
  • tcplayer 源码改造第二弹 -> 加入倍速播放

    由腾讯视频的官方文档可以知道,currentTime方法是暴露给用户,用于获取/设置当前时间的方法,同理,加入获取当前倍速的方法currentRate:

    大洼X
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • 确认过眼神,你是喜欢Stream的人

    摘要:在学习Node的过程中,Stream流是常用的东东,在了解怎么使用它的同时,我们应该要深入了解它的具体实现。今天的主要带大家来写一写可读流的具体实现,就过...

    用户2145235
  • Druid学习笔记(二) - 数据连接的获取

    我们在分析mybatis执行sql的时候,最终定位到数据库连接池上。当时分析到mybatis通过数据库连接池获取到链接,然后通过连接执行sql。

    程序员_备忘录
  • VUE+WebPack游戏设计:欲望都市城市图层的设计

    望月从良
  • 小游戏入门

    极乐君
  • Flutter 入门指北之基础部件

    原文:https://www.jianshu.com/p/8ddb16902ce6

    陈宇明

扫码关注云+社区

领取腾讯云代金券