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 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
巧用canvas
Jan 21 Javascript
JavaScript表单验证实现代码
May 22 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
js实现内置计时器
Dec 16 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
vue实现分页组件
2020/06/16 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
Python中自定义函数的教程
2015/04/27 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
毕业证代领委托书
2014/09/26 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2015年入党决心书
2015/02/05 职场文书
贷款工作证明模板
2015/06/12 职场文书
湘江北去观后感
2015/06/15 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
redis缓存存储Session原理机制
2021/11/20 Redis
Python实现数据的序列化操作详解
2022/07/07 Python
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript