图解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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
浅谈js中的this问题
Aug 31 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 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
做一个有下拉功能的留言版
2006/10/09 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python中apply函数的用法实例教程
2014/07/31 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
python写入已存在的excel数据实例
2018/05/03 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
网络工程专业毕业生推荐信
2013/10/28 职场文书
大学生创业策划书
2014/02/02 职场文书
学校师德承诺书
2014/05/23 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
捐书仪式主持词
2015/07/04 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
Java spring定时任务详解
2021/10/05 Java/Android
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL