图解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 相关文章推荐
js时间日期和毫秒的相互转换
Feb 22 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
Node.js使用Angular简单示例
May 11 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
谈谈我对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
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python抽取指定url页面的title方法
2018/05/11 Python
python调用摄像头显示图像的实例
2018/08/03 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python request操作步骤及代码实例
2020/04/13 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
人事部经理岗位职责
2014/03/07 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
电子商务专业自荐信
2014/06/02 职场文书
农村党员对照检查材料
2014/09/24 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
节约用电通知
2015/04/25 职场文书
行政复议决定书
2015/06/24 职场文书
安全教育培训心得体会
2016/01/15 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python