带无缝滚动的轮播图（含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
随机推荐
- Xcode6 storyboard new push segue 后的视图控制器没有navigation item bug.
手动切一下 老的push,再切回来,就会出有了,我想是一个bug. Xcode 6 Segue with UINavigationItem up vote0down votefavorite I' ...
- pdf生成器
apose, http://www.codeproject.com/Articles/570682/PDF-File-Writer-Csharp-Class-Library-Version
- cocos2d3.x在android下屏蔽多点触控
ios上很简单的在AppController.mm里 [eaglView setMultipleTouchEnabled:YES] 设置为NO,就是单点触控了,无需更改cocos底层代码; andro ...
- 技海拾贝 - Java
1. Java中的多线程 http://blog.csdn.net/luoweifu/article/details/46673975 Java中继承thread类与实现Runnable接口的区别 h ...
- MyBatis笔记
Mybatis:将java对象映射成SQL语句,再将结果转化为java对象,解决了java对象和sql拼接.结果集的问题,又可以自己写sql语句 总体结构: 根据JDBC规范建立与数据库的连接 通过反 ...
- mongodb字段类型转化
最近在使用mongoDB, 发现mongo对字段类型的定义并不是很严格,完全依赖传入数据的类型,在加上PHP是弱类型的语言,所以难免会出现一些错误.如果预想的类型是Int型,但数据存储的是String ...
- nginx-1.7.9快速启动连接手机测移动端页面
大家好,本人之前用nginx熟熟的,后来一段时间不用,当今天再次想使用的时候,发现,悲催的是,竟然忘记怎么用了!噢噢,于是乎,就从网上搜索怎样让nginx和移动端页面联系在一起测试. 可惜的是,我搜索 ...
- include/asm/dma.h
/* $Id: dma.h,v 1.7 1992/12/14 00:29:34 root Exp root $ * linux/include/asm/dma.h: Defines for using ...
- 每瓶啤酒2元，2个空酒瓶或4个瓶盖可换1瓶啤酒。10元最多可喝多少瓶啤酒？ php
//根据题意设定初始变量值//然后 一个while循环去操作//每换得一个瓶子,换的那个减去要做相应的数目//然后喝了啤酒后, 各数量加1//直到不符合要求.跳出循环 1 class Beer{ pr ...
- Clojure web初探
项目环境:3.2.0-52-generic #78-Ubuntu SMP Fri Jul 26 16:21:44 UTC 2013 x86_64 x86_64 x86_64 GNU/LinuxLein ...