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

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. javascript高级知识分析——灵活的参数

    代码信息来自于http://ejohn.org/apps/learn/. 使用数量可变的参数对编程很有好处 function merge(root){ for(i = 0 ; i < argum ...

  2. NULL、空指针，’\0’,0的去区别

    http://blog.csdn.net/bailyzheng/article/details/7677628参考该博客 NULL是空指针常量.

  3. UNITY使用高通Vuforia导出XCode包编译出错

    1.referenced from: in libVuforia.a 此处重新导入引用库并按http://game.ceeger.com/forum/read.php?tid=20447(三楼处理方式 ...

  4. mysql获取各种日期

    select curdate(); --获取当前日期 select last_day(curdate()); --获取当月最后一天. select DATE_ADD(curdate(),interva ...

  5. Java中Overload和Override的区别

    由于项目正式收工,闲来无事突然发现以前的文档上有一个问题介绍的不是很详细 override(重写,覆盖) ​​ 1.方法名.参数.返回值相同. ​2.子类方法不能缩小父类方法的访问权限. 3.子类方法 ...

  6. Android SQLite系列

    转:http://blog.csdn.net/liuhe688/article/details/6715983 Android中如何使用SQLite. 现在的主流移动设备像Android.iPhone ...

  7. codeforces 665D Simple Subset

    题目链接 给一个数列, 让你选出其中的m个数, 使得选出的数中任意两个数之和都为质数, m尽可能的大. 首先, 除了1以外的任意两个相同的数相加结果都不是质数. 然后, 不考虑1的话, 选出的数的个数 ...

  8. sql server 2012 镜像和出现的问题

    镜像安装的环境: 主机:win server 2012 , sql server 2012 ,ip:192.168.1.189  PC账户:administrator 备机:win server 20 ...

  9. Android XListView实现原理讲解及分析

    XListview是一个非常受欢迎的下拉刷新控件,但是已经停止维护了.之前写过一篇XListview的使用介绍,用起来非常简单,这两天放假无聊,研究了下XListview的实现原理,学到了很多,今天分 ...

  10. GDKOI2015 Day1

    P1 题目描述: 判断一个环形字符串(或者减去一个字符之后)是否是回文串 solution: 1.hash 将字符串的前缀进行hash,然后将字符串翻转,再做一次hash,然后枚举对称轴,判断两边的h ...