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存取照片的具体实现方法
Jun 30 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue如何使用rem适配
Feb 06 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 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
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
js实现随机数小游戏
2019/06/28 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python 列表理解及使用方法
2017/10/27 Python
Python3匿名函数用法示例
2018/07/25 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Django静态文件加载失败解决方案
2020/08/26 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
思想汇报格式
2014/01/05 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL