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

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

遇到的问题：
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. osg 在fbx模型中添加自定义节点

  2. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析

    1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...

  3. Qt编写自定义控件57-直方波形图

    一.前言 直方波形图控件非原创控件,控件大全中大概有20-30个控件非自己原创,而是参考了网上开源的代码,自己加以整理和完善,新增了插件的代码使得可以直接集成到QtDesigner或者QtCreato ...

  4. OpenStack Magnum项目简介

    1 项目简介 Magnum是OpenStack中一个提供容器集群部署的服务. Magnum是一个Pass层的OpenStack项目. Magnum使用Heat部署一个包含Docker和Kubernet ...

  5. Intellij-编译

    目录 IntelliJ IDEA 编译方式介绍 编译方式介绍 编译触发按钮 运行之前的编译 @(目录) IntelliJ IDEA 编译方式介绍 编译方式介绍 相比较于 Eclipse 的实时自动编译 ...

  6. WinSCP 上传文件至Cetos 7 后用户无权限

    WinSCP是一个支持SSH的SCP文件传输软件. 可以用Windows环境向Linux环境传输文件,今天给新的Elasticsearch 服务器(cetos 7 )部署新的集群节点的时候,发现传输后 ...

  7. Python - Django - 删除作者

    修改 author_list.html,添加删除按钮 <!DOCTYPE html> <html lang="en"> <head> <m ...

  8. 学习JavaScript之this,call,apply（转）

    转自: http://www.h5cn.com/js/jishu/2016/0128/17884.html 在之前的JavaScript学习中,this,call,apply总是让我感到迷惑,但是他们 ...

  9. Python2 中字典实现的分析【翻译】

    在这片文章中会介绍 Python2 中字典的实现,Hash 冲突的解决方法以及在 C 语言中 Python 字典的具体结构,并分析了数据插入和删除的过程.翻译自python-dictionary-im ...

  10. SSRAM、SDRAM和Flash简要介绍

    问题1:什么是DRAM.SRAM.SDRAM?答:名词解释如下DRAM--------动态随即存取器,需要不断的刷新,才能保存数据,而且是行列地址复用的,许多都有页模式SRAM--------静态的随 ...