今天做了幻灯片，主要功能包括：普通选项卡，向前/向后播放按钮，向前？向后播放功能,自动播放功能

要实现简单选项卡功能是没有问题的，但是添加功能就出现各种各样的问题了

遇到的问题：
1 下标问题
2普通选项卡与向前/向后功能结合的时候冲突，可以向前/向后播放，但是再想实现普通选项卡就出问题了
3 添加向前/向后按钮后，html布局下移
4 添加向前/向后按钮的时候，我用img标签，显然这个不适用，不能很好的调节垂直居中
5 当鼠标放在向前/向后按钮上的时候，闪烁，点击的时候也闪烁，而且还点击失效

解决方法：
1 封闭空间
2 普通选项卡让ul下的li，先className='';然后再让className='on';但是我想让普通选项卡与向前/向后功能结合，使用oUl.style.left=-now*640+'px';这时候就不能让className='';然后再让className='on'了，而是让改css中的ul li为block，然后用oUl.style.left=-now*640+'px'，(img图片的宽度)普通选项卡是让li单个显示的，我的是让ul移动显示
3 主要原因是我用了float，后来改成用定位实现了按钮的左浮动和居中，然后调高层级
4 将img标签改为背景图，很好的解决了垂直居中的问题
5 原先我还以为是事件冒泡，后来我改为，当鼠标移入div时显示向前/向后按钮，并且添加鼠标移入向前/向后按钮事件，ok

代码：
<!--HTML-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片</title>
<link type="text/css" rel="stylesheet" href="../css/幻灯片.css" />
<script src="../js/幻灯片.js"></script>
<script src="../js/move.js"></script>
</head>
<body>
<div id="div1">
<a href="javascript:;" id="prev"></a>
<a href="javascript:;" id="next" ></a>
<ul id="ul1">
<li class="on"><a href="#"><img src="../image/1.jpg" /></a></li>
<li><a href="#"><img src="../image/2.jpg" /></a></li>
<li><a href="#"><img src="../image/3.jpg" /></a></li>
<li><a href="#"><img src="../image/4.jpg" /></a></li>
<li><a href="#"><img src="../image/5.jpg" /></a></li>
<li><a href="#"><img src="../image/6.jpg" /></a></li>
</ul>
<ol id="ol1">
<li class="on"><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
<li><a href="javascript:;">6</a></li>
</ol>
</div>
</body>
</html>

/* CSS Document */
*{margin:0;padding:0;list-style:none;}
#div1{ position:relative; overflow:hidden; width:640px; height:270px; margin:50px auto; }
#div1 ul{ position:relative; left:0; float:left;width:3840px; height:100%;}
#div1 ul li{ float:left;}
#div1 ol{ position:absolute; bottom:20px; left:40%;}
#div1 ol li{ float:left; width:20px; height:20px; background:red; margin-left:10px; text-align:center; cursor:pointer;}
#div1 ol li a{ text-decoration:none; color:#fff;}
#div1 ol li.on{ background:blue;}
#prev{ position:absolute; left:0; top:105px; width:45px; height:60px; display:none; z-index:100; background:#ccc url(../image/btn_l.png) no-repeat center; opacity:0.8;}
#next{position:absolute; right:0; top:105px; width:45px; height:60px; display:none; z-index:100; background: #ccc url(../image/btn_r.png) no-repeat center; opacity:0.8;}
#prev.on,#next.on{ display:block;}

// JavaScript Document
window.onload=function(){
var oOl=document.getElementById('ol1');
var oUl=document.getElementById('ul1');
var oDiv=document.getElementById('div1');
var aUli=oUl.children;
var aOli=oOl.children;
var now=0;
var timer=null;

//点击播放选项卡
for(var i=0;i<aOli.length;i++)
{
(function(index){
aOli[index].onclick=function(){

for(var i=0;i<aOli.length;i++)
{ now=index;
aOli[i].className='';
//aUli[i].className='';
}
aOli[index].className='on';
//aUli[index].className='on';
oUl.style.left=-now*640+'px';
};
})(i)
}

//向前/向后按钮
var oPrev=document.getElementById('prev');
var oNext=document.getElementById('next');
oUl.onmouseover=oPrev.onmouseover=oNext.onmouseover=function(){
//如果光是oUl.onmouseover ，oPrev.onmouseover=oNext.onmouseover移上/点击的时候会闪烁
oPrev.className='on';
oNext.className='on'
};
oUl.onmouseout=function(){
oPrev.className='';
oNext.className=''
};

//向前播放选项卡
oPrev.onclick=function(){
now--;
if(now==-1)now=aOli.length-1;
for(var i=0;i<aOli.length;i++)
{
aOli[i].className='';
aUli[i].className='on';
}
aOli[now].className='on';
oUl.style.left=-now*640+'px';
};

//向后播放选项卡
oNext.onclick=function(){
now++;
if(now==aOli.length)now=0;
for(var i=0;i<aOli.length;i++)
{
aOli[i].className='';
//aUli[i].className='on';
}
aOli[now].className='on';
oUl.style.left=-now*640+'px';
};

//自动向后播放选项卡
autoPlay();
oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
autoPlay();
};

function autoPlay()
{
timer=setInterval(function(){
now++;
if(now==aOli.length)now=0;
for(var i=0;i<aOli.length;i++)
{
aOli[i].className='';
//aUli[i].className='on';
}
aOli[now].className='on';
oUl.style.left=-now*640+'px';
},1300);
}
};

普通选项卡+自动播放功能+向前/向后按钮 原生js的更多相关文章

  1. js中表单提交后按钮变灰色的功能

    表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm

  2. Webdriver控制翻页控件,并实现向前向后翻页功能，附上代码，仅供参考，其他类似日期控件的功能可以自己封装

    新增输入与选择页面的html源码: <div style="margin-top:-60px;" class="modal-content" id=&qu ...

  3. Glibc堆块的向前向后合并与unlink原理机制探究

    i春秋作家:Bug制造机 原文来自:Glibc堆块的向前向后合并与unlink原理机制探究 玩pwn有一段时间了,最近有点生疏了,调起来都不顺手了,所以读读malloc源码回炉一点一点总结反思下. U ...

  4. java 根据系统日期获取前一天、后一天时间(根据初始日期推算出期望（向前/向后）日期)

      1.情景展示  java 根据系统当前日期获取前一天日期.后一天日期,或者根据初始日期推算出期望(向前/向后)日期. 2.解决方案 导包 import java.text.ParseExcepti ...

  5. 在.txt文件的首行写上.LOG后，后面每次对改文本文件进行编辑后，系统会自动在编辑内容后记录操作时间

    在.txt文件的首行写上.LOG后,后面每次对改文本文件进行编辑后,系统会自动在编辑内容后记录操作时间

  6. Java中Date类型如何向前向后滚动时间,( 附工具类)

    Java中的Date类型向前向后滚动时间(附工具类) 废话不多说,先看工具类: import java.text.SimpleDateFormat; import java.util.Calendar ...

  7. Caffe计算net、layer向前向后传播时间

    在caffe中计算某个model的整个net以及各个layer的向前向后传播时间,可以使用下面的命令格式: ./build/tools/caffe time --model=examples/mnis ...

  8. 解决pycharm新建项目后按钮灰色问题

    解决pycharm新建项目后按钮灰色问题 出现过多次该问题了, 在此记录一下 同样适用于导入别人的新项目后无法运行问题 原因一: pycharm没有设置系统解析器 解决方法一: 打开pycharm-& ...

  9. form单提交后按钮变成失效变灰

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. 【转载】 第四范式首席科学家杨强：AlphaGo的弱点及迁移学习的应对（附视频）

    原文地址: https://www.jiqizhixin.com/articles/2017-06-02-2 ============================================= ...

  2. 001-java 设计模式概述

    一.概述 思维导图 GoF(“四人帮”,又称Gang of Four,即Erich Gamma, Richard Helm, Ralph Johnson & John Vlissides) 1 ...

  3. 遍历List集合删除元素的出现报错

    遍历List集合删除元素的出现报错   遍历List集合删除元素的时候会发生索引越界异常或内容遍历不全等问题. 例子: List<String> al = new ArrayList< ...

  4. 第十八章 并发登录人数控制——《跟我学Shiro》

    目录贴:跟我学Shiro目录贴 在某些项目中可能会遇到如每个账户同时只能有一个人登录或几个人同时登录,如果同时有多人登录:要么不让后者登录:要么踢出前者登录(强制退出).比如spring securi ...

  5. ubuntu 12.04 下LVS的一些搭建心得和资料整理

    最近项目上需要使用到IPVS进行负载均衡,针对外部传来的HTTP请求,分摊到多台服务器上进行处理,所以看了一下这方面的资料,在这里纪录一下. Lvs是基于IP层和内容分发请求的负载均衡方法(所以也可以 ...

  6. Arduino图形化编程软件ArduBlock的安装过程

    ArduBlock是一款图形编程插件,接下来我们在Windows10上进行安装 注意ArduBlock虽然能安装在1.83版本的Ardunio上,但在载入程序时会报错,用本身的IDE不会出现这种情况. ...

  7. 如何创建一个线程安全的Map？

    1,使用普通的旧的Hashtable HashMap允许null作为key,而Hashtable不可以 2,使用Collections中同步化的包装方法synchronizedMap 3,使用conc ...

  8. 判断scrollView的滑动方向（二）

    在上一篇文章<判断scrollView的滑动方向>中谈到的第二种方法是根据滑动速率来判断的. 今天将通过滑动过程中的坐标差来判断 - (void)scrollViewDidScroll:( ...

  9. [转帖]Nginx服务器的六种负载均衡策略详解

    Nginx服务器的六种负载均衡策略详解 咔咔侃技术 2019-09-11 17:40:12 一.关于Nginx的负载均衡 在服务器集群中,Nginx起到一个代理服务器的角色(即反向代理),为了避免单独 ...

  10. wordpress 后台添加 快速编辑 栏目

    前两篇其实是同一篇,都是讲在后台添加菜单类型的http://www.ashuwp.com/courses/highgrade/664.htmlhttps://shibashake.com/wordpr ...