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

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

遇到的问题：
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. 【集成模型】Bootstrap Aggregating（Bagging）

    0 - 思想 如下图所示,Bagging(Bootstrap Aggregating)的基本思想是,从训练数据集中有返回的抽象m次形成m个子数据集(bootstrapping),对于每一个子数据集训练 ...

  2. mxnet深度学习实战学习笔记-9-目标检测

    1.介绍 目标检测是指任意给定一张图像,判断图像中是否存在指定类别的目标,如果存在,则返回目标的位置和类别置信度 如下图检测人和自行车这两个目标,检测结果包括目标的位置.目标的类别和置信度 因为目标检 ...

  3. python 对xls写入信息

    只能新创建xls # coding=utf-8import xlwt writebook = xlwt.Workbook()                #打开excel test= writebo ...

  4. 【leetcode_easy】590. N-ary Tree Postorder Traversal

    problem 590. N-ary Tree Postorder Traversal 参考 1. Leetcode_easy_590. N-ary Tree Postorder Traversal; ...

  5. iOS-UIScrollView滚动视图（转）

    http://blog.csdn.net/iukey/article/details/7319314 UIScrollView 类负责所有基于 UIKit 的滚动操作. 一.创建 CGRect bou ...

  6. iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影

    iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...

  7. iOS-UIToolbar与UISearchBar

    组件_ UIToolbar  /** 1. 顶部toolbar 2. TextField可以以UIBarButtonItem的自定义视图的方式加入toolbar 3. 三个按钮 4. 将UIBarBu ...

  8. react-developer-tools

    链接: https://pan.baidu.com/s/1g7kLC3fF-u-lQySLqpivog 提取码: 92j9 复制这段内容后打开百度网盘手机App,操作更方便哦 安装:1.点击--> ...

  9. 零基础python之列表的简单介绍

    你点击关注,就分你小鱼干 一.概念:列表,由一系列按特定顺序排列的元素组成. 在 python 中,用 [ ] 方括号来表示列表,并用逗号来分割其中的元素. 二.访问列表因素 列表是有序集合,如要访问 ...

  10. vue时间戳转换（10位数）/（13位）

    <template> <!-- time为时间戳 --> <div>{{time | formatDate}}</div> <!-- 结果为 20 ...