带无缝滚动的轮播图(含JS运动框架)-简洁版
昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!!
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运动框架)-简洁版的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- 轮播图采用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
随机推荐
- Core MIDI and Friends
http://www.slideshare.net/invalidname/core-midi-and-friends 31 of 31 Core MIDI and ...
- [转]透过 Linux 内核看无锁编程
非阻塞型同步 (Non-blocking Synchronization) 简介 如何正确有效的保护共享数据是编写并行程序必须面临的一个难题,通常的手段就是同步.同步可分为阻塞型同步(Blocking ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- maven不打包子模块资源文件
在maven多模块项目中,对子模块中的测试文件不需要打包到目标项目中,以免产生影响.实现方法: 1. 将测试资源放在java/test/resources 目录下,mvn package默认不会将te ...
- Atom 安装 Packages 的笨办法
在终端里输入下面的命令打开 Atom 的 packages 的安装目录. open ~/.atom/packages 然后找到需要安装的 Atom packages ,比如我需要安装的这个 atom- ...
- javascript onblur事件阻塞选中input框
先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- UML和UP简介(转载)
UML(统一建模语言,Unified Modeling Language)是用于系统的可视化建模语言. UP(统一过程,Unified Process)是通用的软件开发过程. 很多人或书籍过大的夸大 ...
- linux系统下,查看端口号被哪个应用占用
netstat -tunlp 会把所有端口和所有对应的程序显示出来. 用grep管道可过滤出来需要的信息.比如,17059端口号被占用了. 第一步:netstat -tunlp | grep 1705 ...
- 《Android深度探索HAL与驱动开发》第四章阅读心得
Android源代码包含了很多内容,可以实现拍照.计算机.日历.相册.拨号器等功能.配置Android源代码下载环境需要如下几步: (1)创建一个用于存放下载脚本文件的目录: (2)下载repo脚 ...
- jquery与各种UI框架的导入要注意的地方
前端的处理我们会使用easyUI,amazeUI,bootstrap等等框架,然而每个页面都要导入这些js css 文件,所以我们将要导入的文件提取出来,写在一个页面上,每次只要倒入该页面就行,如 ...