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.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原生选项卡(自动播放无缝滚动轮播图)二的更多相关文章
- js原生选项卡(包含无缝滚动轮播图)一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- jquery左右切换的无缝滚动轮播图
1.HTML结构: <head> <script type="text/javascript" src="../jquery-1.8.3/jquery. ...
- JS---案例:无缝的轮播图
案例:无缝的轮播图 w <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...
- iOS swift版本无限滚动轮播图
之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...
- 原生无缝Banner轮播图
话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- js中用面向对象的思想——淡入淡出轮播图
首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换 3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
随机推荐
- JS写返回上一级
应产品需求,自己的网站上要有返回上一级的需求,几经周折,做个小总结. (1): $("XX").on("click",function(){ wind ...
- ABAP modify screen:修改屏幕,实现隐藏、禁止输入字段
Loop at screen会loop处理屏幕上的每一个组件,并对其做相应的处理. SELECTION-SCREEN: BEGIN OF BLOCK B1 WITH FRAME.PARAMETERS ...
- NPOI Excel类
using System;using System.Collections.Generic;using System.Linq;using System.Text;using NPOI.HSSF.Us ...
- 安卓第九天笔记-Activity
安卓第九天笔记-Activity 1.创建Activity 一个界面对应一个activity 创建一个Activity 1.写一个JAVA类,继承Activity publicclass CalcA ...
- iOS开发笔记1:ToDoList、相册、地图应用及新浪微博
前段时间做了一些小东西,一些关键点记录总结如下 1.ToDoList 主要是使用UITableView以及NSUserDefaults完成任务管理,可新建.编辑及删除任务. 因为是Demo性质,所以利 ...
- iOS开发之网络编程--XCode7 更新以来需要手动设置的内容
XCode7 更新以来,默认是不允许加载一些http网络请求,是因为现在网络大部分使用更安全的https协议头. 所以,iOS网络编程如果出现请求无效,事先考虑是否设置一下了以下操作:
- Swift随记
进一步理解swift拆包和解包(如有问题,大神请指教):!作用是拆包,?作用是压包(也许没有压包这个词,实际上就是转为optional类型),不管是!还是?其实都是类型转换的过程.swift语言在类型 ...
- linux下修改系统时间
一.查看时间: [root@localhost ~]# date2016年 11月 19日 星期六 12:46:37 CST 二.修改时间,修改系统时间 [root@localhost ~]# dat ...
- 解决easy ui两次请求服务器的问题
目前该问题已经在1.4.1版本中解决了 本文引用自:http://www.cnblogs.com/Reaver/p/4056770.html,原文博主:flyreaver 我在使用过程中遇到了easy ...
- jquery实践案例--验证电子邮箱
<input type="email" name="email" id="email" value="" onpa ...