js原生选项卡（自动播放无缝滚动轮播图）二

今天分享一下自动播放轮播图，自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器，用定时器控制图片的自动切换，函数中首先封装一个方向的自动播放工能的小函数，这个函数中添加定时器，定时器中可以放向右走的代码，也可以放向左走的代码，然后在js加载的时候先执行一次，保证页面加载的时候轮播图是自动播放的，当然在鼠标悬停在遮罩层的时候我们需要清除这个定时器，让自动播放功能关闭，然后在鼠标再次移出遮罩层的时候再次开启定时器，这样就实现了自动播放的功能。
然后今天的轮播图中我添加了开关的功能，这个开关是为了避免不停的快速点击切换图片时上一个move还没执行完毕然后下一个move再次开启的bug。开关的思路是在函数开始执行之前创造一个false，然后在函数刚开始的时候利用if判断配合布尔值的false实现开的功能，当代买执行过这个关马上让布尔值变为true，从而继续执行代码，在函数全部执行完毕的时候再返回为false；

下面分享代码

html代码：

    <div id="tab"><ul><li><img src="img/4.jpg" alt=""></li><li><img src="img/0.jpg" alt=""></li><li><img src="img/1.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/3.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/0.jpg" alt=""></li></ul><div id="cont"><div class="pre"><span>向左</span></div><div class="next"><span>向右</span></div><ol><li class="on"></li><li></li><li></li><li></li><li></li></ol></div></div>

css代码：

      *{padding: 0;margin: 0;list-style:none;}#tab{width: 300px;height: 172px;position:relative;margin:100px auto;overflow:hidden;}#tab ul{width:2100px;overflow:hidden;position:absolute;top: 0;left: 0px;}#tab ul li{width: 300px;float:left;}#tab ul li img{width: 300px;}#cont{width: 300px;height: 172px;position:absolute;top:0;left: 0;}#cont div{width: 150px;height: 100%;float:left;display:none;}#cont div span{width: 40px;height: 40px;background:rgba(0,0,0,0.2);text-align:center;line-height: 40px;font-size:20px;color:#fff;position:absolute;top:50%;margin-top:-20px;}#cont .pre span{left:0;}#cont .next span{right:0;}#cont ol{width: 100px;position:absolute;left: 100px;bottom:10px;}#cont ol li{width: 10px;height: 10px;background:#ccc;border-radius:50%;margin:5px;float:left;}#cont ol .on{background:red;}

js代码：

 window.οnlοad=function(){var oTab=document.getElementById('tab');var oUl=oTab.getElementsByTagName('ul')[0];var aLi=oUl.children;var oCont=document.getElementById('cont');var oBtn=oCont.getElementsByTagName('div');var oBar=oCont.getElementsByTagName('ol')[0];var aC=oBar.children;var timer=null;var bReady=false;//定位ul的初始位置var iNow=1;oUl.style.left=-aLi[0].offsetWidth*iNow+'px';//当鼠标移入遮罩层，按钮显示，移出遮罩层，按钮消失oCont.οnmοuseοver=function(){clearInterval(timer);oBtn[0].style.display='block';oBtn[1].style.display='block';};//当鼠标移出的时候开启定时器让ul自动向前运动oCont.οnmοuseleave=function(){setInterval(domove,2000);oBtn[0].style.display='none';oBtn[1].style.display='none';};//把运动封成一个函数，向前向后只是改变iNow的值和判断终点位置function domove(){if(bReady){return}bReady=true;iNow--;move(oUl,{left:-aLi[0].offsetWidth*iNow},{"complete":function(){if(iNow==0){iNow=aLi.length-2;oUl.style.left=-aLi[0].offsetWidth*iNow+'px';}for(var i=0;i<aC.length;i++){aC[i].className='';}aC[iNow-1].className='on';bReady=false;}});}

同样的，这个自动播放轮播图应用了我自己封装的move函数，这个move函数需要提前引入，move函数我已经分享到上一篇文章中；

明天会继续分享手机端的拖拽选项卡；

Improve myself little by little every day!

转载于:https://www.cnblogs.com/jasonwang2y60/p/6002528.html

js原生选项卡（自动播放无缝滚动轮播图）二相关推荐

原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
JS经典案例-无缝滚动轮播图（纯JS）
滚动轮播图在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到第一张>最后一张, ...
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
html菜鸟教程轮播图自动播放,如何实现轮播图？
1.背景介绍轮播图,是由网页banner进化而来,通常放在屏幕最显眼的位置,以大图显示.随着互联网的发展,网页中需要推广的信息越来越多,宣传信息都欲占据黄金位置,最后相互妥协,轮播图应运而生.总而言 ...
快乐玩前端：无缝衔接轮播图——原生JS实现
无缝衔接轮播图--原生JS实现原理就不讲了,太麻烦了,大致原理就是两扇推拉门,始终保持推拉门处于开启-闭合状态,大致就这样吧,原理很简单,只是说实现比较麻烦,一直想要实现这样的效果,奈何水平不够,也 ...
android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
android 自动播放幻灯片,Android自动播放Banner图片轮播效果
本文实例为大家分享了Android自动播放Banner图片轮播的具体代码,供大家参考,具体内容如下先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id=&qu ...
Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...

js原生选项卡（自动播放无缝滚动轮播图）二

js原生选项卡（自动播放无缝滚动轮播图）二相关推荐

最新文章

热门文章