效果如下

功能分析

1.每隔1秒换一张图片

2.鼠标移入停止切换、鼠标离开继续切换

3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色

4.鼠标离开数字,从该数字后面继续显示

代码如下

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style type="text/css">

        div,img,ul,li{margin:0;padding:0;}

        #pic{width:480px;height:300px;margin: 100px auto}

        #pic img{width: 100%;height: 300px;border: 1px solid #ccc}

        #pic li{list-style: none;float: left;border:1px solid orange;width:58px;height:30px;text-align: center;line-height: 30px}

    </style>

</head>

<body>

    <div id="pic">

        <img src="img/1.jpg">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

        </ul>

    </div>

    <script type="text/javascript">

        //1. 设置定时器，每隔1000毫秒执行changePic函数

        var interID = setInterval(changePic, 1000);

        var oImg = document.getElementsByTagName('img')[0];

        //3. 鼠标移入到数字上的时候，显示对应的图片

        var oLis = document.getElementsByTagName('li');

        var count = 1;

        function changePic(){

            oImg.src = 'img/'+count+'.jpg';

            //先让所有的li标签背景都为空

            for(var i=0;i<oLis.length;i++){

                oLis[i].style.background = '';

            }

            //让和图片序号对应的li标签背景显示橙色  count-1

            oLis[count-1].style.background = 'orange';

            count ++;

            if(count>8){

                count = 1;

            }

        }

        //鼠标移入停止播放

        oImg.onmouseover = function(){

            clearInterval(interID);

        }

        //鼠标离开继续播放

        oImg.onmouseout = function(){

            clearInterval(interID);

            interID = setInterval(changePic, 1000);

        }

        console.log(oLis.length);

        for(var i=0;i<oLis.length;i++){

            //给每个li标签增加属性oindex保存当前的索引

            oLis[i].oindex = i;

            oLis[i].onmouseover = function(){

                //console.log(i);    //

                //停止播放

                clearInterval(interID);

                //设置li标签的背景颜色

                this.style.background = 'orange';

                count = this.oindex+1;

                changePic();

            }

            oLis[i].onmouseout = function(){

                clearInterval(interID);

                interID = setInterval(changePic, 1000);

            }

        }

    </script>

</body>

</html>

　　

用JS写的简单轮播特效的更多相关文章

  1. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

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

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

  3. 运用CSS和JS写的大图轮播-带箭头

    <style type="text/css"> #datu { width:500px; height:400px; position:relative; margin ...

  4. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  5. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

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

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

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

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

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

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

  9. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

随机推荐

  1. linux下获取ip

    如果打开虚拟机 没有ip置灰显示了 lo 可以使用dhclient自动获取ip 如果想开机就自动获取ip: vim /etc/rc.d/rc.local 在这里插入dhclient命令

  2. 3.4.2内核下的I2C驱动

    1. 框架1.1 硬件协议简介1.2 驱动框架1.3 bus-drv-dev模型及写程序a. 设备的4种构建方法a.1 定义一个i2c_board_info, 里面有:名字, 设备地址 然后i2c_r ...

  3. 伸展树 Splay Tree

    Splay Tree 是二叉查找树的一种,它与平衡二叉树.红黑树不同的是,Splay Tree从不强制地保持自身的平衡,每当查找到某个节点n的时候,在返回节点n的同时,Splay Tree会将节点n旋 ...

  4. MapReduce中使用SequenceFile的方式上传文件到集群中

    如果有很多的小文件,上传到HDFS集群,每个文件都会对应一个block块,一个block块的大小默认是128M,对于很多的小文件来说占用了非常多的block数量,就会影响到内存的消耗, MapRedu ...

  5. 【模拟】UVa 12108 - Extraordinarily Tired Students

    When a student is too tired, he can't help sleeping in class, even if his favorite teacher is right ...

  6. ClassLoader类加载器

    总的来说,当动态加载一个资源时,至少有三种类加载器可供选择: 系统类加载器(也被称为应用类加载器)(system classloader) 当前类加载器(current classloader) 当前 ...

  7. Activity保持关闭不销毁

    activity按back键 消失但是不销毁的实现 重新定义finish()方法: @Override    public void finish() {        // TODO Auto-ge ...

  8. android代码片段一

    1.Android判断是Pad或者手机 public boolean isTabletDevice() { TelephonyManager telephony = (TelephonyManager ...

  9. python中那些双下划线开头得函数和变量--转载

    Python中下划线---完全解读     Python 用下划线作为变量前缀和后缀指定特殊变量 _xxx 不能用'from module import *'导入 __xxx__ 系统定义名字 __x ...

  10. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10（转）

     在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html&g ...