javascript 轮播图（缓存效果）详细篇

对现在的我来说，这样的操作还是有点麻烦，综合使用的话还是有很多毛病，话不多说，做一个上下平移的轮播图（纯js），因为不会，所以可能比较冗余，以便复习到更多知识点

过程

1、生出数字按钮，就是呢个代表着图片的小圆点，就暂且当图片不知道几张
1.1通过获取图片数量用for（）循环，最后的结果是ul>li>1\2\3\4的效果

2、按钮移动切换
3.1：当鼠标移动到图片对应的数字按钮时
3.2：初始化状态

3、初始化状态，包括两个部分
2.1：当前图片对应的数字显示不一样的样式
2.2：图片特效函数，参数是根据下标即数字按钮获得不同的长度，用作上或下移动的距离，可以通过 “-” 改变上或下的方向（最好在全部步骤完成后书写）

4、通过 playTimer = setInterval(next, 3000);每三秒更换数字,并修改样式
4.1:通过下标设置自动改变方向
4.2:初始化状态

5、鼠标移入展示区停止自动播放（clearInterval(playTimer)）

6、鼠标离开展示区开始自动播放（playTimer = setInterval(next, 3000) ）

实例：轮播图之缓存效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自动播放——幻灯片缓冲效果</title><style type="text/css">body,li,ul,div {padding: 0;margin: 0;}body {background: #000000;text-align: center;font: 12px/20px Arial;}#box {position: relative;width: 492px;height: 172px;background: #fff;border-radius: 5px;border: 8px solid #fff;margin: 10px auto;cursor: pointer;}#box .list {position: relative;width: 490px;height: 170px;overflow: hidden;                   /* 删除显示区域    */}#box .list ul {position: absolute;top: 0;left: 0;}#box .list li {/* li上下之间有间隙，设置高度之后可以清楚 */width: 490px;height: 170px;overflow: hidden;}#box .list li {width: 490px;height: 170px;overflow: hidden;}#box .count {position: absolute;right: 0;bottom: 5px;}#box .count li {color: #fff;float: left;width: 20px;height: 20px;cursor: pointer;margin-right: 5px;overflow: hidden;background: #F90;opacity: 0.7;filter: alpha(opacity=70);border-radius: 20px;}#box .count li.current {color: #fff;opacity: 1;filter: alpha(opacity=100);font-weight: 700;background: #f60;}</style><script type="text/javascript">window.onload = function() {var oBox = document.getElementById("box");var oList = oBox.getElementsByTagName("ul")[0];var aImg = oBox.getElementsByTagName("img");var timer = playTimer = null;var index = i = 0;var bOrder = true; /* order命令；顺序；规则 */var aTmp = []; /*  temporary暂时的 */var aBtn = null;//生成数字按钮for (var i = 0; i < aImg.length; i++) {aTmp.push("<li>" + i + "</li>")// console.log(aTmp);       /* 获取li>1\2\3\4\5 */}//创建数字按钮格式var oUl = document.createElement("ul");oUl.className = "count"oUl.innerHTML = aTmp.join(""); /* 将数组直接输入 */oBox.appendChild(oUl);//获取创建节点的lioBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");for (var i = 0; i < oBtn.length; i++) {oBtn[i].index = i;oBtn[i].onmouseover = function() {//初始化index = this.indexinitial()}}//初始化function initial() {for (var i = 0; i < oBtn.length; i++) {oBtn[i].className = "";oBtn[index].className = "current";/* 注意是index，上面已经定义了index=0；所以其实就是改变第一个的样式，而调用后index改变*///图片特效startMove(-(index * aImg[0].offsetHeight))}}//缓存效果,即图片移动逐渐变得缓慢function startMove(imgTop) {// 不加的图片不停闪烁,加载timer后的话,没有特效clearInterval(timer);       /* timer定时器 */timer = setInterval(function() {var speed= (imgTop - oList.offsetTop) / 10;/* 使speed变小，不然假如speed=1000px，直接就换页了，就没缓冲效果 即被除数（10）越大，缓冲效果越明显*/if(speed>0){speed=Math.ceil(speed);}else{speed=Math.floor(speed);}console.log(speed)/* 缓冲的效果就是在这里实现的，我们将速度的大小与当前位置与终点之间的距离成正比，那么距离越小，速度也越小，此外一定要注意这里我们要对速度进行向上，或者向下取整，而且对于正数我们要向上取整，对于负速度，我们要向下取整。 */if(oList.offsetTop == imgTop){clearInterval(timer)}else{oList.style.top = oList.offsetTop + speed + "px";/* 由上可知，无论是上下，当距离越近时，speed的值越小，即上或下的速度越来越慢 */}                   }, 30)}initial()//第一个时,最后一个时，判定,效果就是从1-5,然后从5-1function next() {bOrder ? index++ : index--;if (index <= 0) {index = 0;bOrder = true;}if (index >= oBtn.length - 1) {index = oBtn.length - 1;bOrder = false}initial()}//每三秒更换数字,并修改样式playTimer = setInterval(next, 3000);//鼠标移入展示区停止自动播放oBox.onmouseover = function() {clearInterval(playTimer)};//鼠标离开展示区开始自动播放oBox.onmouseout = function() {playTimer = setInterval(next, 3000)};}</script></head><body><div id="box"><!-- 白色拼屏幕 --><div class="list"><!-- 显示的图片 --><ul><li><img src="img/01.jpg" width="490" height="170" /></li><li><img src="img/02.jpg" width="490" height="170" /></li><li><img src="img/03.jpg" width="490" height="170" /></li><li><img src="img/04.jpg" width="490" height="170" /></li><li><img src="img/05.jpg" width="490" height="170" /></li></ul><!-- 数字按钮格式 --><!--    <ul class="count">     <li>1</li></ul> --></div></div></body>
</html>

javascript 轮播图（缓存效果）详细篇相关推荐

原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
js原生 JavaScript轮播图【渐变淡入淡出】效果实现（附代码）
目录前言轮播图的组成以及实现思想左右按钮的隐藏与显示核心思想代码实现动态生成底部小圆圈核心思想代码实现右左按钮实现核心思想代码实现实现自动播放核心思想代码实现整体代码(复 ...
AxureRP实战（三）Banner轮播图交互（进阶篇）
前一篇<AxureRP实战(二)Banner轮播图交互(基础篇)>用淘宝的首页banner案例讲解了如何运用动态面板实现banner轮播图的切换,有了基本交互功能.但是,交互效果还有些欠缺 ...
html+css部分面试题（4）+拼多多商家入驻网页轮播图hover效果
目录 31:为什么要初始化样式? 32. BFC 是什么? 33.HTML 与 XHTML--二者有什么区别? 34.html 常见兼容性问题? 35.对 WEB 标准以及 W3C 的理解与认识补充 ...
JavaScript轮播图代码
JavaScript轮播图代码 <html><head><meta charset="utf-8"><title>轮播图</t ...
轮播图制作，详细步骤及 HTML+CSS+JS 完整代码
1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
JavaScript轮播图（面向对象）
步骤轮播图1 HTML+CSS 轮播图2 动态生成页面通过 JavaScript程序生成 div标签中所有轮播图需要的标签生成 ul ol div 标签节点根据数组动态生成原始 ul& ...
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件.TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流, ...
JavaScript 轮播图案例
前言一名刚刚入坑前端的小白,如有错误还望指出,谢谢您的查阅提示:以下是本篇文章正文内容,下面案例可供参考轮播图案例(仅供参考) <!DOCTYPE html> <html la ...
javascript轮播图（缓冲运动）
哈喽,大家好呀!我又来咯!相信大家在翻网页的时候都会看到首页的轮播图!今天讲讲实现原理,感觉有用就收藏吧! 轮播图主要是利用缓冲运动来实现图片的切换,这样看起来比较有画面感哈! 那么什么叫做缓冲运动呢 ...

javascript 轮播图（缓存效果）详细篇

过程

实例：轮播图之缓存效果

javascript 轮播图（缓存效果）详细篇相关推荐

最新文章

热门文章