当前位置: 首页 > 编程笔记 >

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

海翔宇
2023-03-14
本文向大家介绍原生JS实现简单的无缝自动轮播效果,包括了原生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实现简单的无缝轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现简单无缝轮播效果的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍原生js实现无缝轮播图效果,包括了原生js实现无缝轮播图效果的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看代码 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍简单实现js无缝滚动效果,包括了简单实现js无缝滚动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JS原生轮播图的简单实现(推荐),包括了JS原生轮播图的简单实现(推荐)的使用技巧和注意事项,需要的朋友参考一下 哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: HTML部分! 接下来是JS部分: 就是这么简单!你学会了吗?? 以上这篇JS原生轮播图的简单实现(推荐)就是小编分享给大

  • 本文向大家介绍JS简单实现无缝滚动效果实例,包括了JS简单实现无缝滚动效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS简单实现无缝滚动效果。分享给大家供大家参考,具体如下: 效果图如下: 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》

  • 本文向大家介绍js实现简单的轮播图效果,包括了js实现简单的轮播图效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 代码: js: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。