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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
js禁止表单重复提交
Aug 29 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
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如何实现Socket服务器
2015/09/23 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python最长公共子串算法实例
2015/03/07 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
小学毕业典礼主持词
2014/03/27 职场文书
房地产活动策划方案
2014/05/14 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2014年度个人总结范文
2015/03/09 职场文书
护士2015年终工作总结
2015/04/29 职场文书
老人院义工活动感想
2015/08/07 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
Python语言中的数据类型-序列
2022/02/24 Python