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

 更新时间:2018年09月26日 09:01:54   作者:他和ta  
轮播效果是老生常谈的话题,今天小编通过实例代码给大家分享原生JS实现简单的无缝自动轮播效果,感兴趣的朋友跟随小编一起学习吧

最近在不断的加强巩固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实现简单的无缝自动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JS中截取数组的几种方法总结

    JS中截取数组的几种方法总结

    在JavaScript中数组是一种常用的数据结构,用于存储多个值,这篇文章主要给大家总结介绍了关于JS中截取数组的几种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • js实现匹配时换色的输入提示特效代码

    js实现匹配时换色的输入提示特效代码

    这篇文章主要介绍了js实现匹配时换色的输入提示特效代码,涉及javascript针对页面元素的匹配及鼠标事件的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • FireFox的getYear的注意事项

    FireFox的getYear的注意事项

    FireFox的getYear的注意事项...
    2007-04-04
  • [JS]实现动态增加框架!未完成

    [JS]实现动态增加框架!未完成

    [JS]实现动态增加框架!未完成...
    2007-03-03
  • JavaScript中类型的强制转换与隐式转换详解

    JavaScript中类型的强制转换与隐式转换详解

    类型强制Coercion是将值从一种类型转换为另一种类型的过程(例如字符串转换为数字,对象转换为布尔值等),下面这篇文章主要给大家给大家介绍了JavaScript中类型的强制转换与隐式转换的相关资料,需要的朋友可以参考下
    2021-08-08
  • 两个JavaScript中的特殊值null和undefined详解

    两个JavaScript中的特殊值null和undefined详解

    Null和Undefined是JavaScript中非常基础和重要的概念,理解它们的含义、特点和使用方式对于避免出现错误和编写健壮的应用程序非常重要,这篇文章主要介绍了两个JavaScript中的特殊值null和undefined详解,需要的朋友可以参考下
    2023-06-06
  • 老生常谈javascript中逻辑运算符&&和||的返回值问题

    老生常谈javascript中逻辑运算符&&和||的返回值问题

    下面小编就为大家带来一篇老生常谈javascript中逻辑运算符&&和||的返回值问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • JS中some和every的区别和用法详解

    JS中some和every的区别和用法详解

    every 和 some 都是数组迭代方法,都可以遍历数组,这篇文章主要介绍了JS中some和every的区别和用法,需要的朋友可以参考下
    2023-05-05
  • 微信小程序中不同页面传递参数的操作方法

    微信小程序中不同页面传递参数的操作方法

    这篇文章主要介绍了微信小程序中不同页面传递参数的操作方法,在开发项目中,避免不了不同页面之间传递数据等,那么就需要进行不同页面之间的一个数据传递的,需要的朋友可以参考下
    2023-12-12
  • BootStrap TreeView使用实例详解

    BootStrap TreeView使用实例详解

    这篇文章主要为大家详细介绍了BootStrap TreeView使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论