JS逻辑与框架调用,

  1. <script type="text/javascript">
  2. var oBox = document.getElementById('box');
  3. var oPrev = document.getElementById('prev');
  4. var oNext = document.getElementById('next');
  5. var oUl = oBox.children[0];
  6. var aLi = oUl.children;
  7. var aBtn = document.getElementById('btn').children;
  8.  
  9. aLi[0].style.left = 0;//把第一张图片设置当前位置
  10. var iNow = 0;
          
            //下一张
  11. oNext.onclick = function(){
  12. move(aLi[iNow],{left:-400});//当前图片向左运动
  13.  
  14. iNow++;
  15. if (iNow == aLi.length) {
  16. iNow = 0;
  17. }
  18. aLi[iNow].style.left = 400+'px';//下一张在右边准备
  19. move(aLi[iNow],{left:0});//运动到当前位置
  20.  
  21. tab()
  22. }
  23.     // 上一张
  24. oPrev.onclick = function(){
  25. move(aLi[iNow],{left:400})
  26. iNow--;
  27. if (iNow < 0) {
  28. iNow = aLi.length-1;
  29. }
  30. aLi[iNow].style.left = -400+'px';
  31. move(aLi[iNow],{left:0})
  32.  
  33. tab()
  34. }
  35.     // 点击按钮
  36. for(var i = 0 ;i < aBtn.length ; i++){
  37. (function(index){
  38. aBtn[i].onclick = function(){
  39. if (index == iNow) {
  40. return;
  41. }else if (index < iNow ) { //点击的按钮在当前位置的左边
  42. move(aLi[iNow],{left:400});
  43.  
  44. aLi[index].style.left = -400+'px';
  45. move(aLi[index],{left:0})
  46. }else if (index > iNow) {//点击的按钮在当前位置的右边
  47. move(aLi[iNow],{left:-400})
  48. aLi[index].style.left = 400+'px';
  49. move(aLi[index],{left:0})
  50. }
  51. iNow = index
  52. tab();
  53. }
  54. })(i);
  55. }
  56.  
  57.      // 为按钮添加样式
  58. function tab(){
  59. for (var i = 0; i < aBtn.length; i++) {
  60. aBtn[i].className ='';
  61. }
  62. aBtn[iNow].className = 'on';
  63. }
  64. </script>

无限循环轮播图之JS部分(原生JS)的更多相关文章

  1. 无限循环轮播图之结构布局(原生JS)

    html部分 <div class="box" id="box"> <ul> <li><img src="i ...

  2. 无限循环轮播图之运动框架(原生JS)

    封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...

  3. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

  4. Android无限循环轮播广告位Banner

     Android无限循环轮播广告位Banner 现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner ...

  5. iOS swift版本无限滚动轮播图

    之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...

  6. 移动端轮播图实现方法(dGun.js)

    本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...

  7. JS-特效 ~ 01. 事件对象、offset偏移/检测、无缝滚动、自动循环轮播图

    Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取 ...

  8. 超级详细 一听就会:利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  9. 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

随机推荐

  1. Online Judge(OJ)搭建(第一版)

    搭建 OJ 需要的知识(重要性排序): Java SE(Basic Knowledge, String, FileWriter, JavaCompiler, URLClassLoader, Secur ...

  2. FFmpeg学习6:视音频同步

    在上一篇文章中,视频和音频是各自独立播放的,并不同步.本文主要描述了如何以音频的播放时长为基准,将视频同步到音频上以实现视音频的同步播放的.主要有以下几个方面的内容 视音频同步的简单介绍 DTS 和 ...

  3. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  4. 对抗假人 —— 前后端结合的 WAF

    前言 之前介绍了一些前后端结合的中间人攻击方案.由于 Web 程序的特殊性,前端脚本的参与能大幅弥补后端的不足,从而达到传统难以实现的效果. 攻防本为一体,既然能用于攻击,类似的思路同样也可用于防御. ...

  5. Android Button的基本使用

    title: Android Button的基本使用 tags: Button,按钮 --- Button介绍: Button(按钮)继承自TextView,在Android开发中,Button是常用 ...

  6. Android 7.1 - App Shortcuts

    Android 7.1 - App Shortcuts 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Shortcuts 文中如有纰漏,欢迎大家留言 ...

  7. java设计模式之--单例模式

    前言:最近看完<java多线程编程核心技术>一书后,对第六章的单例模式和多线程这章颇有兴趣,我知道我看完书还是记不住多少的,写篇博客记录自己所学的只是还是很有必要的,学习贵在坚持. 单例模 ...

  8. 使用Git Bash远程添加分支和简单部署你的静态页面

    新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...

  9. Android—Service与Activity的交互

    service-Android的四大组件之一.人称"后台服务"指其本身的运行并不依赖于用户可视的UI界面 实际开发中我们经常需要service和activity之间可以相互传递数据 ...

  10. BZOJ 3238: [Ahoi2013]差异 [后缀数组 单调栈]

    3238: [Ahoi2013]差异 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 2326  Solved: 1054[Submit][Status ...