<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
a{text-decoration: none;color: #fff;}
#flash{width: 730px;height: 454px;margin: 100px auto;position: relative;cursor: pointer;}
#pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}
#num{position: absolute;left: 40%;bottom: 10px;z-index: 2}
#num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;}
#num li.active{background: #f00;}
.arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;background-color: rgba(0,0,0,0.3);z-index: 3;display: none;}
.arrow:hover{background: rgba(0,0,0,0.7);}
#flash:hover .arrow{display: block;}
#left{left: 2%;}
#right{right: 2%;}
</style>
<script type="text/javascript">
function $(id) {
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
var index=0;
var timer=null;
var pic=$("pic").getElementsByTagName("li");
var num=$("num").getElementsByTagName("li");
var flash=$("flash");
var left=$("left");
var right=$("right");
//单击左箭头
left.onclick=function(){
index--;
if (index<0) {index=num.length-1};
changeOption(index);
}
//单击右箭头
right.onclick=function(){
index++;
if (index>=num.length) {index=0};
changeOption(index);
}
//鼠标划在窗口上面，停止计时器
flash.onmouseover=function(){
clearInterval(timer);
}
//鼠标离开窗口，开启计时器
flash.onmouseout=function(){
timer=setInterval(run,2000)
}
//鼠标划在页签上面，停止计时器，手动切换
for(var i=0;i<num.length;i++){
num[i].id=i;
num[i].onmouseover=function(){
clearInterval(timer);
changeOption(this.id);
}
}
//执行计时器之前，清理计时器，以免造成浪费
if(timer){
clearInterval(timer);
timer=null;
}
//定义计时器
timer=setInterval(run,2000)
//封装函数run
function run(){
index++;
if (index>=num.length) {index=0};
changeOption(index);
}
//封装函数changeOption
function changeOption(curindex){
console.log(index)
for(var j=0;j<num.length;j++){
pic[j].style.display="none";
num[j].className="";
}
pic[curindex].style.display="block";
num[curindex].className="active";
index=curindex;
}
}
</script>
</head>
<body>
<div id="flash">
<ul id="pic">
<li style="display:block"><img src="http://img13.360buyimg.com/da/jfs/t2242/262/578407619/87636/4ffe0c5/56187ed2Nfed9a5b3.jpg" alt=""></li>
<li><img src="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg" alt=""></li>
<li><img src="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg" alt=""></li>
<li><img src="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg" alt=""></li>
<li><img src="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg" alt=""></li>
<li><img src="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg" alt=""></li>
</ul>
<ol id="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<a href="javascript:;" class="arrow" id="left">&lt;</a>
<a href="javascript:;" class="arrow" id="right">&gt;</a>
</body>
</html>

JS轮播图的更多相关文章

  1. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  2. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  3. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  4. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS轮播图（网易云轮播图）

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  6. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  7. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  8. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  9. 第六十八天 js轮播图

    1.浮动与定位结合使用 浮动与相对定位 //1.两者均参与布局 //2.主浮动布局,相对布局辅助完成布局微调 //3.相对定位布局微调不同于盒模型布局微调,相对定位布局不影响盒子原有位置,就会影响兄弟 ...

  10. 原生的js轮播图

    图片会照常循环播放,当然也可以通过按钮来进行切换,当切出当前的页面时,等到你在回到当前页面时该轮播的图片还是停留在你之前所切出去的的那张图片的状态. HTML部分: <html> < ...

随机推荐

  1. [iOS 多线程 & 网络 - 1.1] - 多线程NSThread

    A.NSThread的基本使用 1.创建和启动线程 一个NSThread对象就代表一条线程创建.启动线程NSThread *thread = [[NSThread alloc] initWithTar ...

  2. POJ 1151 Atlantis (扫描线+线段树)

    题目链接:http://poj.org/problem?id=1151 题意是平面上给你n个矩形,让你求矩形的面积并. 首先学一下什么是扫描线:http://www.cnblogs.com/scau2 ...

  3. CodeForces 706B Interesting drink (二分查找)

    题意:给定 n 个数,然后有 m 个询问,每个询问一个数,问你小于等于这个数的数有多少个. 析:其实很简单么,先排序,然后十分查找,so easy. 代码如下: #pragma comment(lin ...

  4. 视频: 千重浪Linux系统调试技术培训 03-01_Basic-CPU-Register

    免费轻松学习Linux系统调试技术 欢迎收看本工作室放到优酷上播放的免费教学视频. 清晰! 完整!  无病毒! 请点击:http://v.youku.com/v_show/id_XNjM1OTQ3Mj ...

  5. 比较器comparable与comparator的使用

    在Java学习和使用里,工具类与算法类(collections和Arrays)也是我们使用比较多的,在它们里面就包含了comparable与comparator这两种比较器. 一.比较器的分类与概念 ...

  6. Codeforces Gym 100610 Problem A. Alien Communication Masterclass 构造

    Problem A. Alien Communication Masterclass Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codefo ...

  7. 从零开始学习Hadoop--第2章 第一个MapReduce程序

    1.Hadoop从头说 1.1 Google是一家做搜索的公司 做搜索是技术难度很高的活.首先要存储很多的数据,要把全球的大部分网页都抓下来,可想而知存储量有多大.然后,要能快速检索网页,用户输入几个 ...

  8. string和stringbuilder的解剖

    String和StringBuilder的深入解析   前言:本文出发点是我们开发的过程中是否真正的理解stringbuilder的使用,string字符串操作的是如何实现(哈希表),stringbu ...

  9. Android 进阶学习：事件分发机制全然解析，带你从源代码的角度彻底理解（上）

    http://blog.csdn.net/guolin_blog/article/details/9097463 事实上我一直准备写一篇关于Android事件分发机制的文章,从我的第一篇博客開始,就零 ...

  10. PYTHON 源码阅读

    http://www.wklken.me/posts/2015/09/29/python-source-gc.html http://www.wklken.me/archives.html https ...