图解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自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
javaScript基础语法介绍
Feb 28 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
小程序实现授权登陆的解决方案
Dec 02 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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作的文本留言本的例子(六)
2006/10/09 PHP
php 小乘法表实现代码
2009/07/16 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
python基础教程之匿名函数lambda
2017/01/17 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python输出pdf文档的实例
2020/02/13 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
墨西哥网上超市:Superama
2018/07/10 全球购物
干部行政关系介绍信
2014/01/17 职场文书
应用心理学专业求职信
2014/08/04 职场文书
慰问信范文
2015/02/14 职场文书
2016年父亲节寄语
2015/12/04 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL