带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下。不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧。
js运动框架的代码如下:
//获取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } //运动框架 //complete:time,ease,fn function move(obj,json,complete){ var dis = {}; var start = {}; for(var name in json){ start[name] = parseInt(getStyle(obj,name)); dis[name] = json[name] - start[name]; } complete = complete || {}; complete.time = complete.time || 1000; complete.ease = complete.ease || "ease-in"; var count = Math.floor(complete.time/30); var n = 0; clearInterval(obj.timer); obj.timer = setInterval(function(){ n++; for(var name in json){ switch (complete.ease){ case "linear": var a = n/count; var cur = start[name] + dis[name]*a; break; case "ease-in": var a = n/count; var cur = start[name] + dis[name]*a*a*a; break; case "ease-out": var a = 1 - n/count; var cur = start[name] + dis[name]*(1-a*a*a); break; } if(name == "opacity"){ obj.style.opacity = cur; obj.style.filter = "alpha(opacity="+cur*100 +")"; }else{ obj.style[name] = cur + "px"; } } if(n == count){ clearInterval(obj.timer); if(complete.fn) complete.fn(); } },30) }
运行的效果图如下:
自动轮播,下方红色按钮同时变换,点击左右箭头分别到达上一张或下一张,问题主要是在第一张和最后一张上面。
神逻辑即将出现,请访客给出好建议哦!!
<!DOCTYPE HTML> <html> <head> <title></title> <style> *{ margin: 0; padding: 0; } #wrap{ width: 590px; height: 340px; margin:100px auto; position: relative; overflow: hidden; } #box{ position: absolute; left: 0; top: 0; } #box li{ width: 590px; height: 340px; list-style: none; float: left; } #btn{ position: absolute; left: 50%; margin-left:-100px ; bottom: 20px; } #btn li{ width: 30px; height:30px; border-radius: 50%; background: #ccc; float: left; list-style: none; margin-right: 10px; } #btn li.active{ background: red; } #wrap a{ display: block; width: 50px; height: 50px; background: rgba(0,0,0,0.5); position: absolute; top: 145px; color: #fff; text-decoration: none; line-height: 50px; text-align: center; } #prev{ left: 0; } #next{ right: 0; } </style> <script src="move.js"></script> </head> <body> <div id="wrap"> <ul id="box"> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> <li><img src="img/4.jpg"></li> <li><img src="img/5.jpg"></li> </ul> <ol id="btn"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ol> <a id="prev" href="javascript:;">←</a> <a id="next" href="javascript:;">→</a> </div> </body> </html> <script> window.onload = function(){ var oWrap = document.getElementById("wrap"); var oBox = document.getElementById("box"); var aBox = oBox.getElementsByTagName("li"); var aBtn = document.getElementById("btn").getElementsByTagName("li"); var oPrev = document.getElementById("prev"); var oNext = document.getElementById("next"); var iNow = 0; var timer = null; oBox.innerHTML += oBox.innerHTML; oBox.style.width = aBox[0].offsetWidth * aBox.length + "px"; oBox.style.width = aBox[0].offsetWidth*aBox.length +"px"; //红色按钮的样式 function tab(){ for(var i=0;i<aBtn.length;i++){ aBtn[i].className = ""; } move(oBox,{left:-aBox[0].offsetWidth*iNow}); aBtn[iNow].className = "active"; } //下一张(神逻辑在此,擦汗!!希望访客给出更好建议) function next(){ if(iNow==aBox.length/2){ oBox.style.left = 0; iNow = 0; } for(var i=0;i<aBtn.length;i++){ aBtn[i].className = ""; } iNow++; var iNew = iNow; if(iNew == aBtn.length) iNew = 0; aBtn[iNew].className = "active"; move(oBox,{left:-aBox[0].offsetWidth*iNow}); } //红色圆钮得点击效果 for(var i=0;i<aBtn.length;i++){ aBtn[i].index = i; aBtn[i].onclick = function(){ iNow = this.index; tab(); } } //上一张(与“上一张”一样的神逻辑!!) oPrev.onclick = function(){ if(iNow<=aBox.length/2 - 1){ iNow+=5; oBox.style.left = -aBox[0].offsetWidth*iNow + "px"; } for(var i=0;i<aBtn.length;i++){ aBtn[i].className = ""; } iNow--; var iNew = iNow-5; if(iNew == -1) iNew = aBtn.length-1; aBtn[iNew].className = "active"; move(oBox,{left:-aBox[0].offsetWidth*iNow}); } oNext.onclick = next; clearInterval(timer); timer = setInterval(next,2000); oWrap.onmouseout = function(){ timer = setInterval(next,2000); } oWrap.onmouseover = function(){ clearInterval(timer); } } </script>
带无缝滚动的轮播图(含JS运动框架)的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)-简洁版
昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: <script> window.onload = function() { var oWra ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
- 轮播图原生js实现和jquery实现和js面向对象方式实现
原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 029 Android 轮播图广告Banner开源框架使用
1.Banner介绍 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能. 2.使用环境配置(具体可见github开源项目) (1)添加依赖 在build.gradl ...
- 简单介绍无限轮播图,js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
- javascript写无缝平移的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用jquery实现带左右按键的轮播图
成品如下: 简单来说就是点击“右”按钮时,转换到右边的下一幅图片,同时上面的小方块颜色也跟着改变,如果已经是最后一幅图片,再点击“右”,则转换到第一幅图片,是直接向左移找到第一幅图的,明天再做一下无缝 ...
- 基于Swiper 2.7.6实现的带缩略图功能的轮播图
非原创,只能适合PC端,如果是移动端,只需要修改界面的大小即可.界面如下: 链接:http://pan.baidu.com/s/1pK9XdUV 密码:jsyk
随机推荐
- rand & random & arc4random
rand(3) / random(3) / arc4random(3) / et al. Written by Mattt Thompson on August 12th, 2013 What pas ...
- ssh整合--struts
一 struts(jar+web.xml+struts.xml+Action) 1import min_jars-------struts-2.3.20.3-all(struts2-blank.war ...
- ScriptableObject本地序列化后重启Unity后报The associated script can not be loaded.Please fix any compile errors and assign a valid script的坑
踩坑 做编辑器一些设置序列化存在本地的时候,继承自ScriptableObject的类通过 创建的asset文件. 在重启Unity后查看这个asset发现上面的所有序列化属性丢失,报的错就是 在不存 ...
- 转:Task任务调度实现生产者消费者模式 (个人理解后文)
纯属个人愚见.欢迎加入反驳(PiDou). 1.前文大致就是,利用Queue配置的一个TaskFactory任务调度器.实现生产者消费者模式的例子..首先我就试了 第一种 FIFO(先进先出)的配置. ...
- Sql/Plus连接Oracle时候出现sql*net not properly installed 解决办法
在PLSQL Developer选择Tools > Preferences > options > 下的如图所示:"Oracle Home" and " ...
- http权威指南
我的plan :one day two hour,one week done!!!争取不超过2周看完
- CSU-1632 Repeated Substrings (后缀数组)
Description String analysis often arises in applications from biology and chemistry, such as the stu ...
- CocoaPods 抛出[!] Unable to satisfy the following requirements: 错误
今天使用CocoaPods管理ReactiveCocoa,抛出以下错误 [!] Unable to satisfy the following requirements: - `ReactiveCoc ...
- 【OPENGL】第三篇 着色器基础(二)
在这一小节,主要学习GLSL的基本数据类型以及控制结构.GLSL具备了C++和Java的很多特性,我们会先了解所有着色阶段共有的特性,再了解各个着色器的专属特性. 1.着色器的基本结构 一个着色器程序 ...
- MATLAB 绘图时的相关心得
matlab中如何调整legend的位置? legend('sinx',-1); %----位于图形框外面-----------------------legend('sinx',0);------- ...