图解js图片轮播效果


Posted in Javascript onDecember 20, 2015

本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下

两种图片轮播实现方案,先来看效果对比:

方案一:

图解js图片轮播效果

原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张。这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯。

 方案二:

图解js图片轮播效果

实现原理示意图

 图解js图片轮播效果

原理:

1.轮播过程中,有几个关键元素:一个舞台(绿框)、候场区(黑框)、排队区(红框)和两个数组A和B。A用来保存正在展示和下一个将要展示的图片,如:图片1、2;B用来保存排队等候出场的图片,如图片5、4、3。

2.每一步轮播时,要做的事情如下:

A要做的事情是把它的第一个元素向左移走,把第二个元素向左移进展示区域;然后把刚才的第一个元素从A中shift出去,并splice进B的第一个位置上。

B要做的事情是把它的最后一个元素,移到候场区(即目前图2所在的位置)等候;然后把刚才的最后一个元素从B中pop出去,并push到A中。

Code:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>图片轮播-v2</title>
 <style>

 ul{
  margin: 0;
  padding: 0;
  list-style: none;

 }

 .sliderWrap{
  width: 200px;
  height: 112px;
  overflow: hidden;
  margin: 0 auto;
 }
 .sliderWrap ul{
  position: relative;
  width: 1000px;
  transition: left .5s ease;
  left: 0;
 }
 .sliderWrap li{
  position: relative;
  float: left;
 }
 .sliderWrap ul li img{
  width: 100%;
 }
 </style>
</head>
<body>
<div class="sliderWrap">
 <ul id="slider">
 <li><img src="images/slider/slider1.jpg" alt=""></li>
 <li><img src="images/slider/slider2.jpg" alt=""></li>
 <li><img src="images/slider/slider3.jpg" alt=""></li>
 <li><img src="images/slider/slider4.jpg" alt=""></li>
 </ul>
</div>
<input type="button" value="click me" id="next"/>
<script>
 /**
 * 图片轮播
 * @type {Element}
 */
 var btn = document.getElementById("next");
 var dom = document.getElementById("slider");
 var liArr = dom.getElementsByTagName("li");

 var curWidth = 200;
 var ulWidth = curWidth * liArr.length;
 var show = [];
 var circle = [];

 var goAway = "translate(-" + curWidth +"px, 0) translateZ(0px)";
 var goIn = "translate(0, 0) translateZ(0px)";
 var goPre = "translate(" + curWidth +"px, 0) translateZ(0px)";

 //保证所有li在ul中能在一行内放下
 dom.style.width = ulWidth + "px";

 for(var i = 0, len = liArr.length; i < len; i++){
 var curLi = liArr[i];

 curLi.setAttribute("data-index", i);
 curLi.style.width = curWidth + "px";

 if(i == 0){
  curLi.style.left = 0;
  show.push(curLi);
 }else{
  curLi.style.left = - curWidth * i + "px";
  if(i > 1){
  translate(curLi, goAway, '')
  circle.push(curLi);
  }else{
  show.push(curLi);
  translate(curLi, goPre, '');
  }
 }


 }

 circle.reverse();

 btn.onclick = function(){
 //已展示的图片滚粗
 var showFirst = show.shift();
 translate(showFirst, goAway, "300ms");

 //正在展示的图片
 translate(show[0], goIn, "300ms");
 circle.splice(0, 0, showFirst);

 //准备好下一个将要展示的图片
 var nextPre = circle.pop();
 translate(nextPre, goPre, "0ms");
 show.push(nextPre);

 };

 function translate(dom, goType, time){
 dom.style.transform =
  dom.style.webkitTransform =
   dom.style.mozTransform =
    dom.style.msTransform =
     dom.style.oTransform = goType;

 dom.style.transitionDuration =
  dom.style.webkitTransitionDuration =
   dom.style.mozTransitionDuration =
    dom.style.msTransitionDuration =
     dom.oTransitionDuration = time;


 }

</script>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是js图片轮播效果的实现原理以及详细代码,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
JavaScript小技巧整理
Dec 30 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 #Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 #Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 #Javascript
js获取本机操作系统类型的两种方法
Dec 19 #Javascript
javascript精确统计网站访问量实例代码
Dec 19 #Javascript
js实现图片轮播效果
Dec 19 #Javascript
js实现图片上传并正常显示
Dec 19 #Javascript
You might like
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
基于Python实现用户管理系统
2019/02/26 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
求职信格式范本
2013/11/15 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
体育活动总结范文
2014/05/04 职场文书
个人剖析材料范文
2014/09/30 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2016年情人节广告语
2016/01/28 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
python开发的自动化运维工具ansible详解
2021/08/07 Python