原生JS实现简单的无缝自动轮播效果


Posted in Javascript onSeptember 26, 2018

最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大。

万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。

先上一张自拍镇楼,哈哈哈

首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧

<div id="wrap">
  <ul id="ul">
    <li>
      <img src="http://img3.imgtn.bdimg.com/it/u=1135520735,2369294998&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img2.imgtn.bdimg.com/it/u=695607252,2370769232&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img4.imgtn.bdimg.com/it/u=4133407901,1533904167&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img5.imgtn.bdimg.com/it/u=4083237979,1376579798&fm=26&gp=0.jpg">
    </li>
    <li>
      <img src="http://img2.imgtn.bdimg.com/it/u=1640379911,3259036309&fm=26&gp=0.jpg">
    </li>
  </ul>
</div>

图片轮播的话我是让整个ul移动显示,而不是更改li的margin,上css代码,因为一张图片设置是80px;所以容器的width就是400了。       

#wrap{
        width: 400px;
        height: 80px;
        overflow: hidden;
        margin-left: 500px;
        margin-top: 300px;
        position: relative;
      }
      #ul{
        position: absolute;
        left: 0;
        top: 0;
        width: 400px;
        font-size: 0;
        margin: 0;
        padding: 0;
      }

然后js代码就很简单了,直接设置一个定时器,让ul缓慢的右移或者左移就可以了。但是会有一个问题,我们等下再讨论,先附上代码

window.onload = function(){
  var odiv = document.getElementById('wrap');
  var oul = document.getElementById('ul');
  setInterval(function(){
    oul.style.left = oul.offsetLeft + 5 +'px';
  },30)

但是图片往右走了就回不了头了,上面的代码只是让图片一直往左移动,那怎么实现当最后一张图片移动到左边缘时第一张图片重新显示,其实很简单

比如图片是1、2、3、4这么显示,那么我们多一份图片不就可以了,也就是说1、2、3、4、1、2、3、4,然后当第2组图片显示到4的时候,我们将ul重新拉回来

那么代码就可以这么写了         

var odiv = document.getElementById('wrap');
      var oul = document.getElementById('ul');
      var oli = oul.getElementsByTagName('li');
      oul.innerHTML = oul.innerHTML + oul.innerHTML;//拼接li,因为图片可能是任意张
      oul.style.width = oli[1].offsetWidth * oli.length + 'px';//ul的宽度等于所有图片宽度的总和
    setInterval(function(){
      if (oul.offsetLeft < -oul.offsetWidth/2) {
        oul.style.left = 0;//如果ul已经显示完了一组,也就是宽度的一半,那么就把他拉回来重新轮播
      }else{
        oul.style.left = oul.offsetLeft - 2 +'px';
      }
    },30);

这样就完成了,可以复制代码在浏览器查看效果。

总结

以上所述是小编给大家介绍的原生JS实现简单的无缝自动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 #Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 #Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 #Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 #Javascript
在vue 中使用 less的教程详解
Sep 26 #Javascript
vue如何进行动画的封装
Sep 26 #Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 #Javascript
You might like
PHP 第一节 php简介
2012/04/28 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
vue.js简单配置axios的方法详解
2017/12/13 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python中__init__和__new__的区别详解
2014/07/09 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
公司领导推荐信
2013/11/12 职场文书
职工运动会邀请函
2014/01/19 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书