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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
实例讲解React 组件
Jul 07 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
vue中template的三种写法示例
Oct 21 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
发现的以前不知道的函数
2006/09/19 Javascript
javascript动画效果类封装代码
2007/08/28 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
Python 元类使用说明
2009/12/18 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python实现转圈打印矩阵
2019/03/02 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
教学实验楼管理制度
2014/02/01 职场文书
珠宝店促销方案
2014/03/21 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
初二学生评语大全
2014/12/26 职场文书
预备党员入党感言
2015/08/01 职场文书
2019 入党申请书范文
2019/07/10 职场文书