js实现图片切换(动画版)


Posted in Javascript onDecember 25, 2016

学习了妙味课堂的图片切换(动画版)

这个小效果相对简单一点。

知识预备:

【1】background-position-x

background-position属性设置背景原图像(由 background-image 定义)的位置,意味着使用这个属性的前提是必须设置背景原图像background-image。

background-position有两个属性值, background-position:x | y,用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。

准备工作完毕,开始写代码

第一步

由于这次需要的div很多,所以采用动态添加的方式,直接看代码

<style>
 body{
 margin: 0;
 background-color: #5e5e5e;
 }
 #box{
 width: 857px;
 height: 574px;
 padding-top: 126px;
 padding-left:143px;
 background: url(img/bg.png) no-repeat;
 margin: 0px auto;
 }
 #wrap{
 width: 700px;
 height: 420px;
 transform-style: preserve-3d;
 perspective: 800px;
 }
 #wrap div{
 width: 10px;
 height: 420px;
 background: url(img/01.png) no-repeat;
 float: left;
 transition: .5s;
 }
 </style>
</head>
<body>
 <div id="box">
 <div id="wrap"></div>
 </div>
 <script>
 //在wrap下,写70个div,每个div显示一张图片的一小片部分,这样70个div能完整的显示出一张图片
 for(var i=0;i<70;i++){
 str +='<div style="background-position-x:'+(-10*i)+'px"></div>';
 }
 oWrap.innerHTML = str;
 //获取70个div
 var divs = oWrap.getElementsByTagName('div');

</script>
 </body>

第二步

写tab()函数,设置每个div要做的动画

tab()函数

// 每个div设置前一个div的透明度为1,并且设置自己的透明度为0和背景图片
 function tab(n){
 // 0 
 if(divs[n-1]){
 divs[n-1].style.opacity = 1;
 }
 // 70
 if(divs[n]){
 divs[n].style.opacity = 0;
 divs[n].style.backgroundImage = "url(img/0"+imgNum+".png)";
 }
 }

第三步

写go()函数,利用定时器改变tab()函数的参数并且适时的改变背景图片

go()

//给tab()函数传递n值
 function go(){
 timer = setInterval(function(){
 tab(num);
 num++;
 //一张图片切换完毕
 if(num == 71){
 clearInterval(timer);
 //切换下一张图片
 imgNum++;
 //num清0,动画效果从第一个div开始
 num = 0;
 //当切到最后一张图片时,在从第一张开始切换
 if(imgNum == 6){
 imgNum = 1;
 }
 //切换完一张图片时切换下一张图片的间隔
 setTimeout(go,800);
 }
 //div变换的速度
 },80);
 }

总结:这个动画效果实现起来简单,代码问题不大,主要就是实现思路的问题。

源码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片切换(动画版)</title>
 <style>
 body{
 margin: 0;
 background-color: #5e5e5e;
 }
 #box{
 width: 857px;
 height: 574px;
 padding-top: 126px;
 padding-left:143px;
 background: url(img/bg.png) no-repeat;
 margin: 0px auto;
 }
 #wrap{
 width: 700px;
 height: 420px;
 transform-style: preserve-3d;
 perspective: 800px;
 }
 #wrap div{
 width: 10px;
 height: 420px;
 background: url(img/01.png) no-repeat;
 float: left;
 transition: .5s;
 }
 </style>
</head>
<body>
 <div id="box">
 <div id="wrap"></div>
 </div>
 <script>
 //在wrap下,写70个div,每个div显示一张图片的一小片部分,这样70个div能完整的显示出一张图片
 for(var i=0;i<70;i++){
 str +='<div style="background-position-x:'+(-10*i)+'px"></div>';
 }
 oWrap.innerHTML = str;
 //获取70个div
 var divs = oWrap.getElementsByTagName('div');
 go();
 //给tab()函数传递n值
 function go(){
 timer = setInterval(function(){
 tab(num);
 num++;
 //一张图片切换完毕
 if(num == 71){
 clearInterval(timer);
 //切换下一张图片
 imgNum++;
 //num清0,动画效果从第一个div开始
 num = 0;
 //当切到最后一张图片时,在从第一张开始切换
 if(imgNum == 6){
 imgNum = 1;
 }
 //切换完一张图片时切换下一张图片的间隔
 setTimeout(go,800);
 }
 //div变换的速度
 },80);
 }
 // 每个div设置前一个div的透明度为1,并且设置自己的透明度为0和背景图片
 function tab(n){
 // 0 
 if(divs[n-1]){
 divs[n-1].style.opacity = 1;
 }
 // 70
 if(divs[n]){
 divs[n].style.opacity = 0;
 divs[n].style.backgroundImage = "url(img/0"+imgNum+".png)";
 }
 }
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 #Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 #Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 #Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 #Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 #Javascript
web 屏蔽BackSpace键实例代码
Dec 24 #Javascript
js实现的xml对象转json功能示例
Dec 24 #Javascript
You might like
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
Yii框架安装简明教程
2020/05/15 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
vue中如何使用ztree
2018/02/06 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
windows系统下Python环境搭建教程
2017/03/28 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python模块WSGI使用详解
2018/02/02 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Django接收自定义http header过程详解
2019/08/23 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
职工运动会邀请函
2014/01/19 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
Python竟然能剪辑视频
2021/05/25 Python