<!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. DATASNAP为支持FIREDAC而增加的远程方法的数据类型TFDJSONDataSets

    前面的博客提到用FIREDAC全面替代COM那一套东西:DATAPROVIDER,OLEVARIANT,CLIENTDATASET,DBEXPRESS... 显然,DATASNAP的远程方法必须增加对 ...

  2. [C语言 - 9] typedef

    关键字typedef   typedef 操作符可以看做是普通变量和类型之间的转换开关!! 例如 typedef int Integer;//定义了一种类型 int Integer;//定义了一个变量 ...

  3. SQL Server 2008 Data Types and Entity Framework 4

    Because I’ve had a lot of conversations about spatial data types lately, I thought I would create a ...

  4. iOS 通知中心 NSNotificationCenter

    iOS开发中,每个app都有一个通知中心,通知中心可以发送和接收通知. 在使用通知中心 NSNotificationCenter之前,先了解一下通知 NSNotification. NSNotific ...

  5. SQL自定义函数split分隔字符串

    SQL自定义函数split分隔字符串 一.F_Split:分割字符串拆分为数据表 Create FUNCTION [dbo].[F_Split] ( @SplitString nvarchar(max ...

  6. C++中用二维数组传参时形参该怎样写[转]

    二维数组的存储方式是和一维数组没什么区别,但是用二维数组做参数,它的形参该怎样写? 要注意的是:函数中的形参其实就相当于一个声明,并不产生内存分配,形参的目的就是要让编译器知道函数参数的数据类型. 正 ...

  7. Spring中注解事务方面的问题

    我们可以在spring的配置文件beans.xml中对事务进行注解配置,这样在相应的类中就不用对事务进行管事,对于某个类,想单独交给spring来管理,那么就在相应的类上加入@Transactiona ...

  8. mysql CASE WHEN的基础和多种用法

    CASE计算条件列表并返回多个可能结果表达式之一. CASE 具有两种格式: 简单 CASE 函数将某个表达式与一组简单表达式进行比较以确定结果. CASE 搜索函数计算一组布尔表达式以确定结果. 两 ...

  9. 我的VisualStudio工具箱

    代码神器 ReSharper 毫无疑问,我认为R#是目前VS插件中有史以来最强大的,各种快捷生成代码的方式, 代码重构, 很多很多的快捷键支持.相比较原生VS的,VS的智能功能简直弱爆了. dimec ...

  10. Swift学习笔记六

    集合类型(Collection Type) Swift提供三种主要的集合类型:数组(array).集合(set).字典(dictionary).数组是有序的值序列,集合是无序的值序列,字典是无序的键值 ...