灵活使用数组制作图片切换js实现


Posted in Javascript onJuly 28, 2016

js活用数组制作图片切换效果,供大家参考,具体内容如下

数组元素位置变换:

将内容分割为数组,将第一个加到最后,删掉第一个

<div id="box">1,2,3,4</div>
<input type="button" value='切换' id='input'>
<script>
 window.onload=function(){
 var oDiv=document.getElementById('box');
 var oInput=document.getElementById('input');

 oInput.onclick=function(){
  var arr=oDiv.innerHTML.split(',');
  // console.log(arr);
  arr.push(arr[0]);//将第一个加到最后,删掉第一个
  arr.shift();
  oDiv.innerHTML=arr;
 }
 }
</script>

模拟图片切换效果:

window.onload=function(){
 var aDiv=document.getElementsByTagName('div');
 var aInput=document.getElementsByTagName('input');
 var arr=[];//创建空数组用于存放属性

 for(var i=0;i<aDiv.length;i++){
 console.dir(getStyle(aDiv[i],'left'));//获取到纯净的最终样式
 //将属性作为 符合数组 加入arr中,可用于多属性
   arr.push([getStyle(aDiv[i],'left'),getStyle(aDiv[i],'top')]);
 }
 // console.dir(arr);

 aInput[0].onclick=function(){//将第一个加到最后,删掉第一个
 arr.push(arr[0]);
 arr.shift();
 for(var i=0;i<aDiv.length;i++){//操作完数组后重新赋值
  aDiv[i].style.left=arr[i][0];
  aDiv[i].style.top=arr[i][1];
 }
 };
 aInput[1].onclick=function(){//将最后一个加到最前,删最后
 arr.unshift(arr[arr.length-1]);
 arr.pop();
 for(var i=0;i<aDiv.length;i++){
  aDiv[i].style.left=arr[i][0];
  aDiv[i].style.top=arr[i][1];
 }
 };
 function getStyle(obj,attr){//获取最终样式
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }else{
  return getComputedStyle(obj,false)[attr];
 }
 }
}

简陋效果图:

灵活使用数组制作图片切换js实现

实例版:

思路:
若有五张图片:图1~5的left值分别为:20px、60px、100px、240px、380px;
点击左切换按钮后,对应的图1~5left值变为:60px、100px、240px、380px、20px;

--------------------------------------------------------------------------------

相当于这组数组第一个元素移到最后:20px、60px、100px、240px、380px、20px;
然后再把第一个元素删除得:60px、100px、240px、380px、20px;
以此类推:

实例布局:

<div id="box">
 <ul>
 <li class='pos_0'><img src="images/1.png" width='300'></li>
 <li class='pos_1'><img src="images/1.jpg" width='400'></li>
 <li class='pos_2'><img src="images/2.jpg" width='500'></li>
 <li class='pos_3'><img src="images/3.jpg" width='400'></li>
 <li class='pos_4'><img src="images/1.jpg" width='300'></li>
 </ul>
 <span class='dir dirl'></span>
 <span class='dir dirr'></span>
</div>

实例样式:

#box{width:700px;height:300px;position:relative;margin:20px auto;text-align: center;}
#box ul{list-style: none;}
#box ul li{position:absolute;}
#box ul li.pos_0{top:50px;left:20px;z-index:1;opacity:0.5;}
#box ul li.pos_1{top:20px;left:60px;z-index:2;opacity:0.8;}
#box ul li.pos_2{top:0px;left:100px;z-index:3;opacity:1;}
#box ul li.pos_3{top:20px;left:240px;z-index:2;opacity:0.8;}
#box ul li.pos_4{top:50px;left:380px;z-index:1;opacity:0.5;}
.dir{display: inline-block;width:45px;height:100px;background:url('images/button.png') no-repeat;
position:absolute;top:60px;z-index:4;}
.dirl{background-position: 0px 0;left:40px;}
.dirr{background-position: -55px 0;right:40px;}

JS代码:

window.onload=function(){
 var oPre=document.getElementsByClassName('dir')[0];
 var oNext=document.getElementsByClassName('dir')[1];
 var aLi=document.getElementsByTagName('li');
 var arr=[];
 for(var i=0;i<aLi.length;i++){
 var oImg=aLi[i].getElementsByTagName('img')[0];
 // console.log(getStyle(aLi[i],'left'));
 // console.log(parseInt(getStyle(aLi[i],'opacity')*100));
 // console.log(getStyle(aLi[i],'z-index'));
 // console.log(oImg.width);
 arr.push([
  parseInt(getStyle(aLi[i],'top')),
  parseInt(getStyle(aLi[i],'opacity')*100),
  parseInt(getStyle(aLi[i],'z-index')),
  oImg.width
  ]);
 // console.log(arr[i][2]);
 }
 // console.dir(arr);
 oPre.onclick=function(){//左
 arr.push(arr[0]);
 arr.shift();
 for(var i=0;i<aLi.length;i++){

  var oImg=aLi[i].getElementsByTagName('img')[0];
  //console.log(arr[i][2]);
  startMove(aLi[i],{
  left:arr[i][0],
  top:arr[i][1],
  opacity:arr[i][2],
  });
  aLi[i].style.zIndex=arr[i][3];
  startMove(oImg,{width:arr[i][4]});
 }
 };
 oNext.onclick=function(){//右
 arr.unshift(arr[arr.length-1]);
 arr.pop();
 for(var i=0;i<aLi.length;i++){

  var oImg=aLi[i].getElementsByTagName('img')[0];

  startMove(aLi[i],{
  left:arr[i][0],
  top:arr[i][1],
  opacity:arr[i][2],
  });

  aLi[i].style.zIndex=arr[i][3];
  startMove(oImg,{width:arr[i][4]});
 }
 };
 function getStyle(obj,attr){//得到是带单位的数值
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }else{
  return getComputedStyle(obj,false)[attr];
 }
 }
}

效果图:

灵活使用数组制作图片切换js实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现页面跳转重定向的几种方式
May 29 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
写一个Vue loading 插件
Nov 09 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
AngularJS 中文API参考手册
Jul 28 #Javascript
AngularJS 简单应用实例
Jul 28 #Javascript
AngularJS 路由详解和简单实例
Jul 28 #Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 #Javascript
AngularJS中实现动画效果的方法
Jul 28 #Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 #Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
django foreignkey(外键)的实现
2019/07/29 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
社区工作者感言
2014/03/02 职场文书
中队活动总结
2014/08/27 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
飞屋环游记观后感
2015/06/08 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
python使用pygame创建精灵Sprite
2021/04/06 Python
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
Python实现生活常识解答机器人
2021/06/28 Python
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript