这个轮播图代码是从网上找来的，专门找了个写法简单的，只是作为一个小练习，大概原理如下：

1.首先是图片切换
2.自动播放
3.调用自动播放
4.移动到容器上边停止播放，离开自动播放
5.移动到导航上停止播放，离开自动播放
6.移动到导航上，切换相对应的导航

然后贴代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;
padding:0;
list-style:none;}
.wrap{height:170px;
width:490px;
margin:60px auto;
overflow: hidden;
position: relative;
margin:100px auto;}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
.wrap ol{position:absolute;
right:5px;
bottom:10px;}
.wrap ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.wrap ol .on{background:#E97305;
color:#fff;}

</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic').getElementsByTagName("li"),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;

// 定义并调用自动播放函数
timer = setInterval(autoPlay, 2000);

// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function () {
clearInterval(timer);
}

// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
clearInterval(timer);
index = this.innerText - 1;
changePic(index);
};
};

function autoPlay () {
if (++index >= pic.length) index = 0;
changePic(index);
}

// 定义图片切换函数
function changePic (curIndex) {
for (var i = 0; i < pic.length; ++i) {
pic[i].style.display = "none";
list[i].className = "";
}
pic[curIndex].style.display = "block";
list[curIndex].className = "on";
}

};
</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>

只是个人的一个小练习，希望诸位大神看了，不要黑我...

js写的简单轮播图的更多相关文章

  1. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  2. 用JS写的简单轮播特效

    效果如下 功能分析 1.每隔1秒换一张图片 2.鼠标移入停止切换.鼠标离开继续切换 3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色 4.鼠标离开数字,从该 ...

  3. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  4. JS---案例：简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  5. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  6. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  7. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  8. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  9. （新手向）基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

随机推荐

  1. SQL中的去重操作

    if not object_id('Tempdb..#T') is null drop table #T Go Create table #T([ID] ),[Memo] nvarchar()) In ...

  2. create a (VSTO) Office 2007 add-in using VS 2012?

    You can get VS 2012 working with Office 2007. First create an Outlook 2010 Add-In and modify the pro ...

  3. c语言中的#ifndef、#def、#endif等宏是什么意思

    #ifndef.(或者#ifndef).#def.#endif等宏这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一 ...

  4. codeforces 383C Propagating tree 线段树

    http://codeforces.com/problemset/problem/383/C 题目就是说,  给一棵树,将一个节点的值+val, 那么它的子节点都会-val, 子节点的子节点+val. ...

  5. Scala数组操作实战详解

    增删改查,要注意的是,Array数组是定长数组,ArrayBuffer数组才是变长数组. 其他集合也存在可变不可变.例如,List,Set,Map 多维数组定义方法与Java类似.

  6. 专题合集：深入Android媒体存储服务

    Android 有一套媒体存储服务,进程名是 android.process.media,主要负责把磁盘中的文件信息保存到数据库当中,供其他 APP 使用以及 MTP 模式使用.这里包含了数据库管理. ...

  7. 武汉新芯：定位存储器制造，两年后或推3D NAND

    武汉新芯集成电路制造公司(XMC)2006成立,2012年底起独立经营,是国有制企业.为了区别于本土的制造巨头SMIC(中芯国际)和华力微电子(HLMC)等,XMC将立足存储器制造.近日,武汉新芯董事 ...

  8. openssl编译（VC6.0）

    官网:http://www.openssl.org/ 得到源码: git clone  https://github.com/openssl/openssl 一.用vc编译器编译: 1.下载nasm: ...

  9. 轻奢品牌全面崛起 Coach、UGG等纷纷抢滩新兴市场_新闻中心_赢商网

    轻奢品牌全面崛起 Coach.UGG等纷纷抢滩新兴市场_新闻中心_赢商网 轻奢品牌全面崛起 Coach.UGG等纷纷抢滩新兴市场

  10. js获取手机重力感应api

    <html> <head> <title>DeviceOrientationEvent</title> <meta charset="U ...