图解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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
javascript随机变色实例代码
Oct 15 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python使用matplotlib绘制热图
2018/11/07 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
公务员职务工作的自我评价
2013/11/01 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
个人作风建设自查报告
2014/10/22 职场文书
先进人物事迹材料
2014/12/29 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
小学体育组工作总结
2015/08/13 职场文书
安全教育的主题班会
2015/08/13 职场文书