图解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 相关文章推荐
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
JS实现字体背景跑马灯
Jan 06 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之curl实现http与https请求的方法
2014/10/21 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
js读写json文件实例代码
2014/10/21 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
EasyUI实现下拉框多选功能
2017/11/07 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python网络应用开发知识点浅析
2019/05/28 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python 实现两个线程交替执行
2020/05/02 Python
python爬取招聘要求等信息实例
2020/11/20 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
关键在于落实心得体会
2014/09/03 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
高中班主任寄语
2019/06/21 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技