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

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

遇到的问题：
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. HTML5 地理位置定位API（3）

    HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...

  2. 006-多线程-集合-Set-ConcurrentSkipListSet

    一.简介 ConcurrentSkipListSet是线程安全的有序的集合,适用于高并发的场景.ConcurrentSkipListSet和TreeSet,它们虽然都是有序的集合.但是,第一,它们的线 ...

  3. osg机械臂模拟

    实现自由旋转  

  4. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_02-我的课程-前端页面与Api说明

    我的课程列表使用element 的card组件,如下: 前端页面代码 点击新增到了一个新增课程的页面 新增课程的界面 下面的card是循环遍历的代码 写死的card的静态数据 请求服务端的接口拿到数据 ...

  5. Q_PROPERTY

    1.在自定义控件中看到这个用法 2.Q_PROPERTY(double Min READ getMin WRITE setMin) 代表当前类有一个double属性叫Min,有一个读函数getMin, ...

  6. LeetCode_111. Minimum Depth of Binary Tree

    111. Minimum Depth of Binary Tree Easy Given a binary tree, find its minimum depth. The minimum dept ...

  7. 学习 TTreeView [15] - 连接数据库 (作为给 "丁永其" 和 "DELPHI万岁" 两位朋友的回复)

    本例效果图: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...

  8. hadoop第一次面到hr（品友互动）

    第一次“北漂” 准备了一个星期的Hadoop,把林子雨老师的视频刷了一遍,翻出了好久没用的小本本,密密麻麻的记了一大堆.刷了网上能找到的Hadoop的所有面试题(这个真的很重要) 然后,启程,北上,还 ...

  9. 使用javamelody监控springboot项目

    JavaMelody是用来在QA和实际运行生产环境中监控Java或Java EE应用程序服务器的一个开源框架.它不是一个工具来模拟来自用户的请求,而是一个测量和计算用户在实际操作中应用程序的使用情况的 ...

  10. 关于PADS的一些概念和实用技巧（一）

    关于PADS的一些概念和实用技巧(一) 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 1. 关于part,CAE Decal,PCB Decal Part ...