效果如下

功能分析

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. C. Fox And Names

    C. Fox And Names time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  2. javaweb学习总结十一(JAXP对XML文档进行DOM解析)

    一:将内存中写好的xml文件读取到硬盘上 二:DOM方式对xml文件进行增删改查 1:添加节点(默认是在最后的子节点后面添加) @Test // 向元素中添加节点<version>1.0& ...

  3. SSH整合_struts.xml 模板

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...

  4. PE制作实录 —— 补充说明

    上一篇博文中我提到了定制 PE 合盘的方法,可能还有一些朋友不是很懂,这里补充几点. 要点1: 菜单的排布 U盘启动时的界面,这里叫做主界面,而主界面下有时还会用到子界面,下面是我制作的PE的菜单目录 ...

  5. 如何评价微信小程序？

    这次我不站张小龙,虽然他说的「用完即走」的道理在,但我并不认为小程序会形成生态. (一) 仅仅从抽象场景上来讲,小程序当然很美好. 对开发者来说,不用费尽心思开发好多平台的 APP 了,不用考虑适配各 ...

  6. hdu 3635 Dragon Balls

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  7. js验证 button 提交

    <form class="form-horizontal" role="form" action="member_add" metho ...

  8. Web.config加密和解密

    在系统部署的时候,大家都会遇到关于用户凭证的安全性问题,而对于数据库连接的相关的信息,有些时候客户也需要我们对其加密,防止信息泄露,在此将加密和解的方法记录于此: 首先用管理员的权限启动cmd命令窗口 ...

  9. IE升级代码时邮件内容

    TypeErrorUnable to set property 'value' of undefined or null reference. 但是可以进入添加页面,填完信息后,submit后跳转至 ...

  10. Ehcache(2.9.x) - API Developer Guide, Cache Eviction Algorithms

    About Cache Eviction Algorithms A cache eviction algorithm is a way of deciding which element to evi ...