今天学习了一下轮播图的写作，想到前一阵学过的无缝滚动得思想，所以就把轮播与滚动结合了一下。不过我的代码的神逻辑我自己都不敢恭维，在没网没参照的情况下，只能硬着头皮往下写，希望跟大家共勉吧。

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运动框架）的更多相关文章

  1. 带无缝滚动的轮播图（含JS运动框架）-简洁版

    昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: <script> window.onload = function() { var oWra ...

  2. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  3. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

  4. 轮播图原生js实现和jquery实现和js面向对象方式实现

    原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. 029 Android 轮播图广告Banner开源框架使用

    1.Banner介绍 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能. 2.使用环境配置(具体可见github开源项目) (1)添加依赖 在build.gradl ...

  6. 简单介绍无限轮播图，js源代码

    无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html>   <head>     <meta charse ...

  7. javascript写无缝平移的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 用jquery实现带左右按键的轮播图

    成品如下: 简单来说就是点击“右”按钮时,转换到右边的下一幅图片,同时上面的小方块颜色也跟着改变,如果已经是最后一幅图片,再点击“右”,则转换到第一幅图片,是直接向左移找到第一幅图的,明天再做一下无缝 ...

  9. 基于Swiper 2.7.6实现的带缩略图功能的轮播图

    非原创,只能适合PC端,如果是移动端,只需要修改界面的大小即可.界面如下: 链接:http://pan.baidu.com/s/1pK9XdUV 密码:jsyk

随机推荐

  1. RabbitMQ在window的搭建

    RabbitMq window 搭建设置过程,网上有些说的不太明白,所以亲自操刀测试过程,参考了很多人的资料,多谢各位大神的宝贵资料第一步:装RabbitMq运行环境,类似一个虚拟机的东东 1.otp ...

  2. 实现PageProcessor

    4.1 实现PageProcessor 这部分我们直接通过GithubRepoPageProcessor这个例子来介绍PageProcessor的编写方式.我将PageProcessor的定制分为三个 ...

  3. 使用qmake构建程序（有关.pro和.vcproj编译选项对应关系）

    houjinxin 为了方便统一构建,准备使用qmake构建所有的vc工程,无论是否使用了Qt库,可是在网上找了几天,有几个选项根本就不知道怎么在pro里面配置,才能生成预期的vcproj文件... ...

  4. 快速上手RaphaelJS--Instant RaphaelJS Starter翻译（二）

    (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter2 ...

  5. ie8的兼容

    1.IE8以下不支持getElementsByClassName方法//解决IE8之类不支持getElementsByClassNameif (!document.getElementsByClass ...

  6. Oracle笔记3-高级查询

    高级查询 1.关联查询 作用:可以跨多表查询 --查询出员工的名字和他所在部门的名字 //错误//select first_name,name from s_emp,s_dept; //错误原因:产生 ...

  7. MMDrawerController在表视图和导航栏中的使用

    1.如果不在APPDelegate引入MMDrawerController框架,那么就要注意在需要点击的视图控制器中的对象的获取. //工程中标签视图控制器 MainTabBarViewControl ...

  8. NSXMLParser解析xml格式

    NSXMLParser解析xml格式的数据 用法如下: 首先,NSXMLParser必须继续NSXMLParserDelegate协议 @interface XMLHelper : NSObject ...

  9. oracle-trasnlate函数

    1.translate函数语法 TRANSLATE(string,from_str,to_str) 2.作用有两个: 1)可以替换string中的对应字符,from_str和to_str会做字符的一一 ...

  10. Java中的Object类介绍

    Object类是所有类的父类,如果一个类没有使用extends关键字明确标识继承另外一个类,那么这个类默认继承Object类. Object类中的所有方法适用于所有子类 Object中比较常见的方法: ...