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玩一玩WSH吧
Feb 23 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
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中使用Oracle数据库(5)
2006/10/09 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
一端时间轮换的广告
2006/06/26 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
讲解Python中的递归函数
2015/04/27 Python
Python中return语句用法实例分析
2015/08/04 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
wxpython绘制音频效果
2019/11/18 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
农药学硕士毕业生自荐信
2013/09/25 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
优秀广告词大全
2014/03/19 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
MySQL优化之慢日志查询
2022/06/10 MySQL