图解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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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和ACCESS写聊天室(九)
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
JS数组排序方法实例分析
2016/12/16 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python 实现音频叠加的示例
2020/10/29 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
python tqdm库的使用
2020/11/30 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
C++:局部变量能否和全局变量重名
2014/03/03 面试题
运动会广播稿500字
2014/01/28 职场文书
活动策划邀请函
2014/02/06 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis