JS左右无缝轮播功能完整实例


Posted in Javascript onMay 16, 2019

本文实例讲述了JS左右无缝轮播功能。分享给大家供大家参考,具体如下:

其中对上一页下一页按钮设置visibility属性是为了解决轮播中点击上一页下一页导致的bug,应为是a标签所以用了visibility属性,如果是按钮button可以直接设置在轮播过程中按钮不可点击,当然其他解决方法都可以,以实际为准

代码如下:换换图片就可以直接用

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com JS左右无缝轮播</title>
  <style>
    * {margin:0;padding:0;}
    #scrollImg{width:1000px;margin:100px auto;}
    #prev{float:left;line-height:250px;}
    #next{float:right;line-height:250px;}
    #div1 {width:800px;height:250px;margin:0px auto;position:relative;overflow:hidden;}
    #div1 ul {position:absolute;left:0;top:0;}
    #div1 ul li {float:left;list-style:none;width:200px;height:250px;}
    #div1 ul li img{width:100%;height:100%;}
  </style>
</head>
<body>
<div id="scrollImg">
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="prev">向左</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="next">向右</a>
  <div id="div1">
    <ul>
      <li><img src="image/0.jpeg" /></li>
      <li><img src="image/1.JPEG" /></li>
      <li><img src="image/3.jpg" /></li>
      <li><img src="image/4.jpeg" /></li>
    </ul>
  </div>
</div>
<script>
  window.onload=function(){
    var oDiv=document.getElementById("div1");
    var oUl=document.getElementsByTagName("ul")[0];
    var oLi=document.getElementsByTagName("li");
    var index=0;
    var timer;//定时器
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//将轮播内容复制一份
    oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
    //移动速度
    var speed=-10;
    //控制滚动的方向
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");
    //上一页
    prev.onclick=function(){
      if(index==4){
        index=1;
        oUl.style.left="0px";
      }else{
        index++;
        speed=10;
      }
      move();
    };
    //下一页
    next.onclick=function(){
      if(index==0){
        index=3;
        oUl.style.left=-oUl.offsetWidth/2+"px";
      }else{
        index--;
        speed=-10;
      }
      move();
    };
    function move(){
      timer=setInterval(function () {
        oUl.style.left=oUl.offsetLeft-speed+"px";
        var stop=-index*oLi[0].offsetWidth+"px";
        prev.style.visibility="hidden";
        next.style.visibility="hidden";
        if(oUl.style.left==stop){
          clearInterval(timer);
          prev.style.visibility="visible";
          next.style.visibility="visible";
        }
      },20);
    }
  }
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 #Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 #Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 #Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 #Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 #Javascript
怎样在vue项目下添加ESLint的方法
May 16 #Javascript
eslint 的三大通用规则详解
May 16 #Javascript
You might like
深入解析php中的foreach函数
2013/08/31 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP实现的简单缓存类
2015/07/29 PHP
php防止用户重复提交表单
2015/11/02 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python绘制数码晶体管日期
2021/02/19 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
计算机专业自荐信
2013/10/14 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
出售房屋协议书范本
2014/10/06 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
大明湖导游词
2015/02/03 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书