昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!!

js代码如下:

 <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";

         function tab(){
             for(var i=0;i<aBtn.length;i++){
                 aBtn[i].className = "";
             }
             move(oBox,{left:-aBox[0].offsetWidth*iNow});
             //判断iNow是否大于红色圆扭得个数,若大于则需减去按钮的个数
             if(iNow > aBtn.length-1){  //next中的情况,主要出现的是oBox后面的li
                 aBtn[iNow-aBtn.length].className = "active";
             }else{  //prev中的情况,主要出现的是oBox前面的li
                 aBtn[iNow].className = "active";
             }
         }

         //next,当循环到最后一张图片时,返回到前面与它相同的那张图片
         function next(){
             iNow++;
             if(iNow >aBox.length - 1){
                 oBox.style.left = -oBox.offsetWidth/2 +aBox[0].offsetWidth + "px";
                 iNow = aBtn.length;
             }
             tab();
         }

         //prev,当循环到第一张图片时,返回到后面与它相同的那张图片
         oPrev.onclick = function(){
             iNow--;
             if(iNow <0){
                 oBox.style.left = -oBox.offsetWidth/2 + "px";
                 iNow = aBtn.length - 1;
             }
             tab();
         }

         oNext.onclick = next;

         timer = setInterval(next,2000);
         oWrap.onmouseout = function(){
             clearInterval(timer);
             timer = setInterval(next,2000);
         }
         oWrap.onmouseover = function(){
             clearInterval(timer);
         }
     }
 </script>

今天的代码要简洁很多,逻辑相对昨天的也清晰不少,多种尝试,总会发现新的方法!!!

带无缝滚动的轮播图(含JS运动框架)-简洁版的更多相关文章

  1. 带无缝滚动的轮播图(含JS运动框架)

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

  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. Launcher 壁纸

    0.添加壁纸: 在给系统换默认的壁纸的时候,需要修改一些地方: 首先是默认的壁纸,这个是在framework中配置的,所以要修改framework中找到drawable-nodpi(这个文件夹中的内容 ...

  2. Windows And Video Memory

    MSDN Blogs > Zemblanity > Windows And Video Memory   Windows And Video Memory Tom_Mulcahy 11 F ...

  3. MySql数据库忘记root密码

    以windows为例: 1. 关闭正在运行的MySQL服务.(services.msc运行停止服务) 2. 打开DOS窗口,转到mysql\bin目录.(输入cd..返回到c盘根目录下,一般MySQL ...

  4. 如何控制JVM中的JIT行为?

    首先交代一下我自己的测试环境: Ubuntu 12.04 x86-64,OpenJDK 7 64-bit Server VM(mixed mode) MacOS  10.11,HotSpot  7 6 ...

  5. flume中的agent配置和启动

    首先创建一个文件example.conf(touch example.conf) 然后在文件中,进行agent文件的如下的配置(vi  example.conf)   agent文件的配置:(配置ag ...

  6. bootstrap-datetime 的使用

    bootstrap-datetime js的下载 http://pan.baidu.com/s/1eQnE5dK html的代码 <div class="input-group dat ...

  7. 硬件抽象层:HAL

    本章主要讲硬件抽象层:HAL,它是建立在Linux驱动之上的一套程序库.刚开始介绍了为什么要在Android中加入HAL,目的有三个,一,统一硬件的调用接口.二,解决了GPL版权问题.三,针对一些特殊 ...

  8. WebLogic口令猜解工具【Python脚本】

    WebLogic 默认端口7001 可以通过如下链接访问控制台 http://10.9.1.1:7001/console/login/LoginForm.jsp 写了一个简单的猜解脚本,半成品,做个记 ...

  9. LINQ 联查多表数据并封装到ViewModel的实现

    LINQ 联查多表数据并封装到ViewModel的实现 public List<MyTask> GetPagedTaskList(int pageIndex, int pageSize, ...

  10. 控制器(Controller) – ASP.NET MVC 4 系列

           创建一个 ASP.NET MVC 4 Web Application 项目,将程序命名为 MvcMusicStore,如下图: 控制器        MVC 模式中,控制器主要负责响应用 ...