图解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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
JavaScript实现alert弹框效果
Nov 19 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
留言板翻页的实现详解
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
js实现日历的简单算法
2017/01/24 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
python操作xml文件详细介绍
2014/06/09 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
国庆促销活动总结
2014/08/29 职场文书
统计学教授推荐信
2014/09/18 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python