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拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
js实现动态显示时间效果
Mar 06 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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
多文件上传的例子
2006/10/09 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python中的zipfile模块使用详解
2015/06/25 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
python reduce 函数使用详解
2017/12/05 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
详解Python self 参数
2019/08/30 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
python代码区分大小写吗
2020/06/17 Python
电子狗项圈:eDog Australia
2019/12/04 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
一年级学生评语
2014/04/23 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
义卖募捐活动总结
2015/05/09 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
网络研修随笔感言
2015/11/18 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL