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

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. DQL

    DQL(Data QueryLanguage) 基本格式 select * from 表名 对于列进行限制 格式一:取指定列 select 列1,列2 from 表名 格式二:为列起别名的三种表示法, ...

  2. Sizzle一步步实现所有功能（基本筛选）

    第二步:实现:first,:last,:eq(),even,odd,:gt(),:lt(); :header,:root,:taget; :not(). ;(function( window ){ v ...

  3. oracle日期函数集锦

    oracle 中select TO_CHAR(sysdate,'Mon') from dual; Question:出来是中文的“6月” 我想要英文的怎么办? Answer:select to_cha ...

  4. iOS 打开系统设置

    NSURL*url=[NSURL URLWithString:@"prefs:root=WIFI"]; [[UIApplication sharedApplication] ope ...

  5. PHP搭建简单暴力的mvc

    对于一个web系统来说,我们使用mvc很必要, 给我们带来的是清晰的结构,易运维,易扩展, mvc 我对其的理解应该叫mxvc, 多了一个x , 这个x代表什么,x可以理解为 relay,proxy, ...

  6. CentOS6安装Mysql5.7.10亲测

    亲测验证适用于5.7.10 1. 获得二进制文件 wget http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-5.7.10-linux-glibc2.5-x8 ...

  7. 21个值得收藏的Javascript技巧

    1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...

  8. 移动端使用rem方法

    (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...

  9. mysql函数操作(3)

    <?php $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); $dbh->s ...

  10. CSS自学笔记（2）:CSS语法

    CSS的语法规则主要有两个分构成选择器和声明(声明问一条或者多条). selector {declaration1; declaration2; ... declarationN } 选择器(selc ...