今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走的代码,也可以放向左走的代码,然后在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.onload=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.onmouseover=function(){
clearInterval(timer);
oBtn[0].style.display='block';
oBtn[1].style.display='block';
};
//当鼠标移出的时候开启定时器让ul自动向前运动
oCont.onmouseleave=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!

js原生选项卡(自动播放无缝滚动轮播图)二的更多相关文章

  1. js原生选项卡(包含无缝滚动轮播图)一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

  2. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  3. jquery左右切换的无缝滚动轮播图

    1.HTML结构: <head> <script type="text/javascript" src="../jquery-1.8.3/jquery. ...

  4. JS---案例:无缝的轮播图

    案例:无缝的轮播图 w <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...

  5. iOS swift版本无限滚动轮播图

    之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...

  6. 原生无缝Banner轮播图

    话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...

  7. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  8. js中用面向对象的思想——淡入淡出轮播图

    首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...

  9. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

随机推荐

  1. ready和onload

    ready:jQuery方法,当DOM载入就绪时执行.(不包含图片等非文字媒体文件) 它可以极大地提高web应用程序的响应速度. 有一个参数--对jQuery函数的引用--会传递到这个ready事件处 ...

  2. 【读书笔记】iOS-GCD-block

    一,block的定义 //申明变量 (void)(^PrintStr)(void); //定义 PrintStr=^{ NSLog(@"PrintStr"); }; //调用 Pr ...

  3. IOS 计步器

    这篇博客介绍的是当前比较流行的“计步器”-只是简单的知识点 计步器的实现在IOS8开始进行了改变. 但是我会对之前之后的都进行简单介绍. IOS 8 - // // ViewController.m ...

  4. android network develop(1)----doing network background

    Develop network with HttpURLConnection & HttpClient. HttpURLConnection  is lightweight with Http ...

  5. Jmeter之HTTP Request Defaults

    一.HTTP Request Defaults的作用: 该组件可以为我们的http请求设置默认的值.假如,我们创建一个测试计划有很多个请求且都是发送到相同的server,这时我们只需添加一个Http ...

  6. bsearch的溢出问题

    在java中为了避免 low+high溢出,可以用无符号右移:正数高位补0,负数高位补1 int mid = (low + high) >>> 1; 如果是在c++中,那么需要先转换 ...

  7. MS SqlServer学习笔记(索引)

    1.索引分类 MS SqlServer提供了两种索引:聚集索引和非聚集索引: 聚集索引是将数据按照索引的顺序存放 非聚集索引是将索引和数据分离存放,通过指针将二者联系到一起. 因为两种索引对比: 使用 ...

  8. nodejs 安装及部署遇到的问题

    Error: ENOENT, stat 'C:\Users\PC_Name\AppData\Roaming\npm PC_Name是机器名 解决方法:在Roaming文件夹下创建一个叫npm的空文件夹 ...

  9. jsp EL 表达式

    EL表达式 EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有E ...

  10. .net framework 4.6.2 下载

    .net framework   .net framework版本: 4.6.2 File Name: NDP462-KB3151800-x86-x64-AllOS-ENU.exe 发布日期: 201 ...