带无缝滚动的轮播图(含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
随机推荐
- Launcher 壁纸
0.添加壁纸: 在给系统换默认的壁纸的时候,需要修改一些地方: 首先是默认的壁纸,这个是在framework中配置的,所以要修改framework中找到drawable-nodpi(这个文件夹中的内容 ...
- Windows And Video Memory
MSDN Blogs > Zemblanity > Windows And Video Memory Windows And Video Memory Tom_Mulcahy 11 F ...
- MySql数据库忘记root密码
以windows为例: 1. 关闭正在运行的MySQL服务.(services.msc运行停止服务) 2. 打开DOS窗口,转到mysql\bin目录.(输入cd..返回到c盘根目录下,一般MySQL ...
- 如何控制JVM中的JIT行为?
首先交代一下我自己的测试环境: Ubuntu 12.04 x86-64,OpenJDK 7 64-bit Server VM(mixed mode) MacOS 10.11,HotSpot 7 6 ...
- flume中的agent配置和启动
首先创建一个文件example.conf(touch example.conf) 然后在文件中,进行agent文件的如下的配置(vi example.conf) agent文件的配置:(配置ag ...
- bootstrap-datetime 的使用
bootstrap-datetime js的下载 http://pan.baidu.com/s/1eQnE5dK html的代码 <div class="input-group dat ...
- 硬件抽象层:HAL
本章主要讲硬件抽象层:HAL,它是建立在Linux驱动之上的一套程序库.刚开始介绍了为什么要在Android中加入HAL,目的有三个,一,统一硬件的调用接口.二,解决了GPL版权问题.三,针对一些特殊 ...
- WebLogic口令猜解工具【Python脚本】
WebLogic 默认端口7001 可以通过如下链接访问控制台 http://10.9.1.1:7001/console/login/LoginForm.jsp 写了一个简单的猜解脚本,半成品,做个记 ...
- LINQ 联查多表数据并封装到ViewModel的实现
LINQ 联查多表数据并封装到ViewModel的实现 public List<MyTask> GetPagedTaskList(int pageIndex, int pageSize, ...
- 控制器(Controller) – ASP.NET MVC 4 系列
创建一个 ASP.NET MVC 4 Web Application 项目,将程序命名为 MvcMusicStore,如下图: 控制器 MVC 模式中,控制器主要负责响应用 ...