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

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. Core MIDI and Friends

    http://www.slideshare.net/invalidname/core-midi-and-friends               31 of 31     Core MIDI and ...

  2. [转]透过 Linux 内核看无锁编程

    非阻塞型同步 (Non-blocking Synchronization) 简介 如何正确有效的保护共享数据是编写并行程序必须面临的一个难题,通常的手段就是同步.同步可分为阻塞型同步(Blocking ...

  3. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  4. maven不打包子模块资源文件

    在maven多模块项目中,对子模块中的测试文件不需要打包到目标项目中,以免产生影响.实现方法: 1. 将测试资源放在java/test/resources 目录下,mvn package默认不会将te ...

  5. Atom 安装 Packages 的笨办法

    在终端里输入下面的命令打开 Atom 的 packages 的安装目录. open ~/.atom/packages 然后找到需要安装的 Atom packages ,比如我需要安装的这个 atom- ...

  6. javascript onblur事件阻塞选中input框

    先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  7. UML和UP简介(转载)

    UML(统一建模语言,Unified Modeling Language)是用于系统的可视化建模语言.  UP(统一过程,Unified Process)是通用的软件开发过程. 很多人或书籍过大的夸大 ...

  8. linux系统下,查看端口号被哪个应用占用

    netstat -tunlp 会把所有端口和所有对应的程序显示出来. 用grep管道可过滤出来需要的信息.比如,17059端口号被占用了. 第一步:netstat -tunlp | grep 1705 ...

  9. 《Android深度探索HAL与驱动开发》第四章阅读心得

     Android源代码包含了很多内容,可以实现拍照.计算机.日历.相册.拨号器等功能.配置Android源代码下载环境需要如下几步: (1)创建一个用于存放下载脚本文件的目录:  (2)下载repo脚 ...

  10. jquery与各种UI框架的导入要注意的地方

    前端的处理我们会使用easyUI,amazeUI,bootstrap等等框架,然而每个页面都要导入这些js   css 文件,所以我们将要导入的文件提取出来,写在一个页面上,每次只要倒入该页面就行,如 ...